css实现鼠标悬浮后的提示效果

时间 2019-11-10

标签 css 实现鼠标悬浮提示效果栏目 CSS 繁體版

原文原文链接

1、概述css

不少时候网站中须要在鼠标划太小图标时，悬浮出提示性的文字。好比下图：html

鼠标悬浮后的效果网站

这种效果能够使用css中的伪类hover来实现。但有时候搞不清两个元素的嵌套关系。使用了hover却没有效果。本人刚开始使用的时候也踩了这个坑。在此作下记录：url

html代码：spa

1  <body>
2     <span class="tip-img">
3       <span class="prompt-box">悬浮上来的内容</span>
4     </span>
5   </body>

css代码：code

  .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没有效果。并且被嵌套的内部元素必定要绝对定位脱离标准流，不然会影响标准流中元素的位置。htm