[分享]css3提示图片效果

现在的网页设计注重交互性和美观性，而CSS3提供了丰富的效果，能够让网页更加生动、直观，提示图片效果就是其中之一。.tooltip { : relative; display: inlineblock...

现在的网页设计注重交互性和美观性，而CSS3提供了丰富的效果，能够让网页更加生动、直观，提示图片效果就是其中之一。

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
} 

上面的代码中，我们定义了一个外层元素.tooltip和一个内层元素.tooltiptext，外层元素作为提示图片的容器，内层元素则是实际的图片内容。通过:hover伪类，当鼠标悬浮在容器上时，内层元素的可见性变成可见，从而实现了提示图片效果。

<div class="tooltip">
  Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div> 

要使用这个效果，只需要在HTML中嵌套一个.tooltip元素，然后在其中添加文字内容和.tooltiptext元素即可，这样提交后就可以看到鼠标经过时效果了。