css实现⿏标悬浮后的提⽰效果
⼀、概述
很多时候⽹站中需要在⿏标划过⼩图标时，悬浮出提⽰性的⽂字。⽐如下图：
⿏标悬浮后的效果
这种效果可以使⽤css中的伪类hover来实现。但有时候搞不清两个元素的嵌套关系。使⽤了hover却没有效果。本⼈刚开始使⽤的时候也踩了这个坑。在此做下记录：
html代码：
1  <body>
2    <span class="tip-img">
3      <span class="prompt-box">悬浮上来的内容</span>
4    </span>
css特效文字5  </body>
css代码：
.tip-img {
display: inline-block;
background: url("img/icon-help.png") no-repeat left center;
height: 32px;
position: relative;
width: 12px;
}
.tip-img .prompt-box {
background-color: #ccc;
width:120px;
position: absolute;
left: 14px;
top: 5px;
display: none;
}
.tip-img:hover {
background: url("img/icon-help-hover.png") no-repeat left center;
}
.tip-img:hover .prompt-box {
display: inline-block;
}
注意：⿏标移动上去的元素和悬浮出来的元素⼀定要是嵌套关系，否则使⽤hover没有效果。⽽且被嵌套的内部元素⼀定要绝对定位脱离标准流，否则会影响标准流中元素的位置。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。