一、概述
很多时候网站中需要在鼠标划过小图标时，悬浮出提示性的文字。比如下图：
鼠标悬浮后的效果
这种效果可以使用css中的伪类hover来实现。但有时候搞不清两个元素的嵌套关系。使用了hover却没有效果。本人刚开始使用的时候也踩了这个坑。在此做下记录：
html代码：
1 <body> 2 <span class="tip-img"> 3 <span class="prompt-box">悬浮上来的内容</span> 4 </span> 5 </body>
css代码：
.tip-img { display: inline-block; background: url("img/icon-help.png") no-repeat left center; height: 32px; position: relative; 12px; } .tip-img .prompt-box { background-color: #ccc; 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没有效果。而且被嵌套的内部元素一定要绝对定位脱离标准流，否则会影响标准流中元素的位置。