html - 悬停效果上的工具提示不可见

Answer 1

您需要一些代码来实际触发动画。

在下面的示例中，我已将内部嵌套<span>以<a>使用:hover.

<div class="wrapper">  
  <a href="#" class="show">
     Hover Me !
     <span class="tooltip">Hello ! This is tooltip....</span>
  </a>
</div> 

a:hover span {
    opacity:1;
}

http://jsfiddle.net/6RV5n/

编辑：

这是相同的概念，但使用 CSS 相邻兄弟选择器以免嵌套元素：

<div class="wrapper">
 <a href="#" class="show">Hover Me !</a>
 <span class="tooltip">Hello ! This is tooltip....</span>
</div>

a.show:hover + span.tooltip {
    opacity:1;
}

http://jsfiddle.net/7pT8Y/3/

请记住，CSS 兄弟选择器可能无法在旧版本的 IE 中使用。

Answer 2

如果您需要在用户悬停在 div 包装器上时显示工具提示。使用以下 CSS。

.wrapper:hover > .tooltip{
    opacity: 1;
}

检查这个... http://jsfiddle.net/TsQB5/

[编辑]

.tooltip{
     display:none;
 }

 .show:hover > .tooltip{
     display: block;
 }

这样可以解决问题。。