Question

我遇到了问题：悬停工具提示应该可见，但它没有发生。我只使用CSS没有包含js。需要帮助。先感谢您...：）这是我的css：

.tooltip{
        position: relative;
        opacity: 0;
        padding: 10px;
        background: #9B59B6;
        border-radius: 5px;

    -webkit-transition:all 0.2s ease-in;
      -moz-transition:all 0.2s ease-in;
            transition:all 0.2s ease-in;
     }

HTML：

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

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/

请记住旧版IE中的CSS同级选择器may not work。

Answer 2

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

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

检查一下...... http://jsfiddle.net/TsQB5/

[EDITED]

.tooltip{
     display:none;
 }

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

这可以解决问题..

在<a></a>上悬停效果时，工具提示不可见

2 个答案:

编辑：