如何隐藏当前鼠标悬停并通过以下方式显示的元素:通过jQuery悬停css伪类

Question

我有一个导航，它通过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，它将根据散列值填充页面的一部分。这一切都运行得很好。我试图做的是强制当前通过:hover css显示的<div>...</div>隐藏。

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

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

提前感谢大师们。

Answer 1

如果您使用的是:hover伪类，恐怕就无法实现这一点。

如果不使用:hover类也可以使用，下面是如何通过jQuery：http://jsfiddle.net/jHatE/实现的

Answer 2

我建议使用JS向您想要隐藏的元素添加一个类，并使用一些CSS (在:hover CSS之后)来隐藏包含该类的任何元素。

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

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

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

.hidden {opacity: 0;}

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