0

在您将鼠标悬停在菜单上之前，我不想显示菜单上的简短说明。我不能让它工作，也不知道为什么。在我的示例中，预期的结果是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。

4

2 回答 2

3

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

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

应该可以解决问题。

于 2013-02-10T23:18:13.003 回答
1

而不是这个：

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

把这个：

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

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

于 2013-02-10T23:24:14.937 回答