jQuery 悬停（或不悬停）隐藏元素的目标父元素

Question

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

您错过了选择器中的双引号。它的工作。

Fiddle: https://jsfiddle.net/gyowv1dx/1/

Answer 2

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

使用 $ 而不是 jQuery 并遗漏双引号

Answer 3

您在 jquery 选择器的末尾漏掉了一个双引号。您也可以仅使用 $ 访问 jquery。这是修改后的 fiddle

Working Fiddle

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

Answer 4

不仅您缺少双引号，而且还错误地将 class 名称 .nm-main-menu 而不是 .main-menu 。确保您应该通过 console.log 或 [= 进行测试14=]

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

jQuery 悬停（或不悬停）隐藏元素的目标父元素

jQuery target parent of hidden element on hover (or not)

javascript

jquery

css

parent

jquery-hover

HTML

CSS

jQuery