悬停显示提示图标，CSS实现方法

本文详细介绍了如何仅用纯CSS实现元素悬停时优雅显示提示图标（如“ℹ”信息图标）的实用技巧，核心是结合`:hover`伪类与`::after`伪元素，通过`position: relative`定位、`content`属性注入图标、`opacity`与`visibility`协同控制显隐，并借助`transition`实现平滑动画效果；无需额外HTML结构，简洁高效、兼容性好，还支持Unicode、字体图标等多种图标方案，是前端开发中提升用户体验又保持代码轻量的理想实践。

要实现一个元素在悬停时显示提示图标（比如一个问号或信息图标），可以使用 CSS 的 :hover 和 ::after 伪元素结合 content 属性来完成。这种方式无需额外 HTML 标签，简洁且易于维护。

基本原理

通过给目标元素设置 ::after 伪元素，在默认状态下隐藏该图标，当用户将鼠标悬停在元素上时，利用 :hover 触发伪元素的显示。

实现步骤

示例代码

以下是一个简单的例子：在一个按钮旁悬停时显示一个“i”提示图标。

<code><span   style="max-width:100%"><style></span>
.tip-icon {
    position: relative;
    display: inline-block;
    padding: 10px 15px;
    background-color: #007BFF;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}
<p>.tip-icon::after {
content: "ℹ"; /<em> 提示图标 </em>/
position: absolute;
left: -20px; /<em> 调整位置 </em>/
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-color: #fff;
color: #007BFF;
border-radius: 50%;
text-align: center;
font-size: 12px;
line-height: 16px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}</p><p>.tip-icon:hover::after {
opacity: 1;
visibility: visible;
}
<span style="color:#00007F;font-weight:bold"></style></span></p><p><span style="color:#00007F;font-weight:bold"><div</span> <span style="color:#7F007F">class=</span><span style="color:#A31515">"tip-icon"</span><span style="color:#00007F;font-weight:bold">></span>悬停看看提示图标<span style="color:#00007F;font-weight:bold"></div></span></p></code>

关键点说明

基本上就这些，不复杂但容易忽略细节。

好了，本文到此结束，带大家了解了《悬停显示提示图标，CSS实现方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！