使用 jQuery 取消 CSS 悬停行为

Posted 2023-03-06

【中文标题】使用 jQuery 取消 CSS 悬停行为

【英文标题】：Cancel CSS hover behavior with jQuery

【发布时间】：2013-05-16 08:36:02

【问题描述】：

我工作的网站有一个导航菜单（一个 CSS 格式的无序列表），其中包含一些类别的子菜单（子无序列表）。

此 CSS 规则隐藏子菜单无序列表：

.main-navigation ul ul 
    display:none;

当访问者将光标悬停在***菜单链接上时，此 CSS 规则会显示子菜单无序列表：

.main-navigation ul li:hover > ul ;
    display:block;

这是为那些（可能不存在）在浏览器中禁用 javascript 的用户完成的。

现在我正在使用 jQuery 为导航菜单增添趣味，我需要做的第一件事是禁用由 CSS 决定的悬停行为。出于某种原因，我很难这样做，并且可以使用一些帮助。这是我尝试过的：

jQuery(document).ready(function($) 
     $('.main-navigation ul li:hover > ul').css('display', 'none');

);

不走运，CSS 仍然控制行为，并且子菜单在悬停时弹出，就好像没有 jQuery 存在一样。这意味着，我没有正确地做到这一点。

如果有人向我解释应该如何做，我将不胜感激！

【参考方案1】：

试试这个：

DEMO

jQuery(document).ready(function($) 
     $('.main-navigation ul li').on('mouseover',function()
        $('.main-navigation ul li:hover > ul').css('display', 'none');
     );
);

【讨论】：

完美，@roasted！像魅力一样工作。谢谢！

这个 sn-p @roasted 的一切都很完美，只有一个例外。该脚本不考虑如果用户将鼠标从链接上移开会发生什么。请你再帮忙一点好吗？我将不胜感激！

我不了解您的问题，您能否提供示例或详细说明如何重现您的问题？

我看到您在控制台中有一些错误。首先通过使用 jquery 迁移或升级插件或降级 jquery 版本来迁移代码来修复这些错误。就是说，您的菜单行为很奇怪，恐怕我没有时间调试您的所有站点。您应该通过打开一个新问题来发布您的问题，其中包括您用于设置菜单和子菜单的所有代码。基本上，您似乎想要的行为菜单作为互联网上的大量示例，您应该能够找到适合您需求的一种。

【参考方案2】：

您能做的最好的事情就是从父类中删除 main-navigation 类。否则，您将无法通过 JavaScript 操作伪类的样式。

【讨论】：

你的意思是，像这样，@techfoobar: $('.main-navigation ul').removeClass('.main-navigation'); - 我说的对吗？

移除类，你将失去所有附加的 css 样式规则，甚至一些你想保留的规则

是的，出于某种神秘的原因，删除该类并没有取消悬停行为，@roasted。 （我怀疑我做错了，不知何故。）仍然 - 你的解决方案是最好的。

正如烤的所说，删除类也会删除其他样式，可能不是你想要的。