jQuery：悬停时（或不悬停）如何选择隐藏元素的父级

Question

我正在尝试为一个隐藏的ul的父元素a添加类（或CSS），当悬停在祖先li上时，它会显示出来。
我无法直接更改代码以获得结果，因此我需要使用jQuery。
代码如下：

HTML

<nav class="main-menu">
  <ul>
    <li>
      <a>
        <ul class="sub-menu">

CSS

.main-menu .sub-menu {display: none;}
.main-menu li:hover .sub-menu {display: block;}
.hovered {color: red;}

这里是我用jQuery尝试的内容，但它不起作用：

jQuery

jQuery(".nm-main-menu ul.sub-menu).hover(function(){
  jQuery(this).parent().addClass("hovered");
});

这里有一个范例，所有内容都在其中。
也许使用.hover()不是最好的方式……
请帮忙。

- somepaulo

---

您缺少引号 jQuery(".nm-main-menu ul.sub-menu)。 - Jacky Shek

Answer 1

jQuery(".nm-main-menu ul.sub-menu").hover(function(){
  jQuery(this).parent().addClass("hovered");
});

您在选择器中漏掉了一个双引号。它正在工作。

示例: https://jsfiddle.net/gyowv1dx/1/

- hdotluna

Answer 2

你在jquery选择器的结尾处漏掉了一个双引号。此外，你可以通过使用$来访问jquery。 这是修改后的fiddle链接：

工作的fiddle $(".main-menu ul.sub-menu").hover(function(){ $(this).parent().addClass("hovered"); });

- Karthik Sivaraj

---

谢谢，但我需要在这个项目中使用jQuery。 - somepaulo

但为什么会这样呢？ - Karthik Sivaraj

Answer 3

$(".nm-main-menu ul.sub-menu").hover(function(){
  $(this).parent().addClass("hovered");
});

使用 $ 代替 jQuery 并注意双引号的使用。

- Rizwan Ali Sabir

---

谢谢。这个我需要用jQuery来做。 - somepaulo

Answer 4

你不仅缺少双引号，而且将类名.nm-main-menu错误地放在了.main-menu中。当然，你应该通过console.log或alert进行测试。

jQuery(".main-menu ul.sub-menu").hover(function(){
        console.log("Working"); //alert("Working");
        jQuery(this).parent().addClass("hovered");
});

- Jack jdeoel

---

感谢您注意到错误的类名。实际上它是正确的，来自我正在处理的实际代码。我只是为了这篇文章的目的简化了一些东西。 - somepaulo