j查询隐藏元素的目标父级悬停(或不悬停）

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

本文关键字：悬停 隐藏 查询 元素 目标      更新时间：2023-09-26

我正在尝试将一个类(或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");
});

在这里，一切都在小提琴中。
也许.hover()不是要走的路...
请帮忙。

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

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

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

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

工作小提琴

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

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

使用 $ 代替 jQuery 和遗漏的双引号

您

不仅缺少双引号，而且还错误地将类名.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");
});
相关文章：