CSS 悬停不起作用？

Question

在您将鼠标悬停在菜单上之前，我不想显示菜单上的简短说明。我无法让它工作，也不知道为什么。在我的例子中，预期的结果是单词 My Work 最初应该被隐藏，然后在悬停时单词 My Work 变得可见。悬停不起作用。

Here is a working fiddle和代码:

HTML

<ul id="sdt_menu" class="sdt_menu">
<li>
    <a href="#">
        <img src="images/1.jpg" alt=""/>
        <span class="sdt_active"></span>
        <span class="sdt_wrap">
            <span class="sdt_link">Portfolio</span>
            <span class="sdt_descr">My work</span>
        </span>
     </a>
   </li>
 </ul>

CSS

ul.sdt_menu li .sdt_descr{
   visibility:hidden;
}
ul.sdt_menu li .sdt_descr:hover{
   visibility:visible;
}

如果 jQuery 是更好的解决方案，我不介意使用它。

Answer 1

这是一种奇怪的行为(在用户悬停之前隐藏某些东西)。它本质上是一个隐藏的功能，因此可能是一个用户体验问题。

除此之外，该元素未注册为“悬停”，因为它是隐藏的。 您可以使用 opacity(及其 IE 特定对应物 filter:alpha)使元素在悬停之前完全透明，从而获得所需的效果:

ul.sdt_menu li .sdt_descr{
    opacity: 0;
    filter:alpha(opacity=0);
}
ul.sdt_menu li .sdt_descr:hover{
    opacity: 1;
    filter:alpha(opacity=100);
}

应该可以解决问题。