css实现鼠标悬浮后的提示效果
一、概述
很多时候网站中需要在鼠标划过小图标时,悬浮出提示性的文字。比如下图:
鼠标悬浮后的效果
这种效果可以使用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; 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没有效果。而且被嵌套的内部元素一定要绝对定位脱离标准流,否则会影响标准流中元素的位置。
End of the article,share a word with you!
所谓的焦虑和迷茫,其实是身体懒惰和脑子勤奋的矛盾。I'm on my way!
所谓的焦虑和迷茫,其实是身体懒惰和脑子勤奋的矛盾。I'm on my way!