悬停时隐藏元素的jQuery目标父级（或没有）

Question

我正在尝试将一个类（或 CSS）添加到 a，隐藏的 ul 的父级，当祖父级 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");
});

这一切都在fiddle中。
也许.hover() 不是要走的路...
请帮忙。

Answer 1

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

您错过了选择器内的双引号。它正在工作。

小提琴：https://jsfiddle.net/gyowv1dx/1/

Answer 2

您在 jquery 选择器的末尾错过了双引号。您也可以使用 $ 访问 jquery。 这是修改后的小提琴

Working Fiddle

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

Answer 3

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

使用 $ 代替 jQuery 并错过双引号

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");
});