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没有效果。而且被嵌套的内部元素一定要绝对定位脱离标准流，否则会影响标准流中元素的位置。

posted on 2018-12-06 01:04 RisingSunBlogs 阅读(14449) 评论(0) 编辑收藏举报