0

我有一个导航，它通过 css 隐藏在视口之外，并通过 :hover 伪类显示在包含 li 的悬停上。标记和 css 下面。

ul li div#someid{position:absolute;left:-9999px;opacity:0;}
ul li:hover div#someid { left:0;opacity:1;z-index:9000;}




 <ul>
     <li>
     <div>The Content to Hide <a href="#runAjax">Click Me</a></div>
     </li>
 </ul>

单击“Click Me”后，我运行一些 jQuery，它将根据散列值填充页面的一部分。这一切都很好。我想要做的是强制<div>...</div>当前通过:hovercss显示的内容隐藏。

我已经阅读并尝试设置.css('left','-9999px');以及.removeClass("hover");当然我已经尝试过.hide()，但这会阻止它可见并且仍然显示当鼠标悬停在链接上时一旦 mouseOut 发生它然后隐藏在 dom 中，除非设置为.show()

关于我做错了什么或如何通过 jQuery 删除悬停/鼠标悬停行为的任何想法。

在此先感谢大师。

4

2 回答 2

0

我建议使用 JS 向要隐藏的元素添加一个类，并使用一些 CSS（在 :hover CSS 之后）隐藏具有该类的任何元素。

由于隐藏它的新类的 CSS 在显示它的 CSS 之后，因此只要您的 CSS 特异性不覆盖该元素，该元素就会被隐藏。

添加/删除类通常是控制哪些 CSS 样式规则控制给定元素的一种非常好的方法。

例如，在影响此对象的其他样式规则之后创建此 CSS 样式规则：

.hidden {opacity: 0;}

并将“隐藏”类添加到对象中。当您希望它再次显示悬停时，您只需删除“隐藏”类。

于 2011-07-20T00:38:15.047 回答
0

只要您使用:hover伪类，恐怕您就无法实现这一目标。

如果可以在不使用:hover该类的情况下生存，那么您可以通过 jQuery 来实现：http: //jsfiddle.net/jHatE/

于 2011-07-20T00:45:55.013 回答