Question

我在菜单上有一个简短的描述，在你将鼠标悬停在菜单上之前我不想显示。我不能让这个工作，不知道为什么。在我的示例中，预期结果是最初应隐藏单词My Work然后悬停单词My Work变为可见。悬停不起作用。

的 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

这是一种奇怪的行为（在用户将其悬停之前隐藏某些内容）。它本质上是一个隐藏的功能，因此可能是一个UX问题。

除此之外，该元素未被注册为“悬停”，因为它被隐藏。您可以使用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);
}

应该可以做到这一点。

Answer 2

而不是：

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

把这个：

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

这将允许您在用户悬停li元素时显示说明。 http://jsfiddle.net/2Wrj7/3/

CSS悬停不起作用？

2 个答案: