如何通过 jQuery 隐藏当前鼠标悬停并通过 :hover css 伪类显示的元素
我有一个导航,它通过 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 显示的
。
我已阅读并尝试设置 .css('left','-9999px');
以及 .removeClass("hover");
当然我已尝试 .hide()
但这会阻止它可见,并且当鼠标悬停在链接上时,一旦发生 mouseOut,它就会隐藏在 dom 中,除非设置为 .show( )
关于我的任何想法我做错了或者我如何通过 jQuery 删除悬停/鼠标悬停行为。
提前感谢各位大师。
I have a navigation that is hidden out of the viewport via css and shown on hover of the containing li via the :hover pseudo class. Markup and css below.
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>
Upon click of the "Click Me" I run some jQuery that will populate a part of the page based on the hash value. This all works fine. What I am trying to do is force the <div>...</div>
that is currently being shown via the :hover
css to hide.
I have read and tried to set the .css('left','-9999px');
as well as .removeClass("hover");
and of course I have tried .hide()
but this prevents it from being visible and still shows as the mouse is hovering over the link once mouseOut occurs it is then hidden in the dom unless set to .show()
Any ideas on what I am doing wrong or how I can remove the hover/mouseover behavior via jQuery.
Thanks in advance gurus.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
恐怕只要您使用
:hover
伪类就无法实现此目的。如果可以在不使用
:hover
类的情况下生存,则可以通过 jQuery 实现以下操作:http: //jsfiddle.net/jHatE/Afraid you cannot achieve this as long as you're using the
:hover
pseudo class.If can live without using the
:hover
class, here's how you can do it via jQuery: http://jsfiddle.net/jHatE/我建议使用 JS 向要隐藏的元素添加一个类,并使用一些 CSS(在 :hover CSS 之后)来隐藏具有该类的任何元素。
由于隐藏它的新类的 CSS 位于显示它的 CSS 之后,因此只要您的 CSS 特异性不覆盖该元素,该元素就会被隐藏。
添加/删除类通常是控制哪些 CSS 样式规则控制给定元素的非常好的方法。
例如,在影响此对象的其他样式规则之后创建此 CSS 样式规则:
并将“隐藏”类添加到该对象。当您希望它再次在悬停时显示时,只需删除“隐藏”类即可。
I'd suggest using JS to add a class to the element you want to hide and have some CSS (after the :hover CSS) that hides any element with that class.
Since the CSS for the new class that hides it is after the CSS that shows it, the element will be hidden as long as your CSS specificity doesn't override that.
Adding/removing classes is often a really nice way to control which CSS style rules control a given element.
For example, create this CSS style rule after your other styles rules that affect this object:
And add the "hidden" class to the object. When you want it to show on hover again, you just remove the "hidden" class.