一、概述
很多時候網站中需要在鼠標划過小圖標時，懸浮出提示性的文字。比如下圖：
鼠標懸浮后的效果
這種效果可以使用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沒有效果。而且被嵌套的內部元素一定要絕對定位脫離標准流，否則會影響標准流中元素的位置。