CSS或JS解决方案-将鼠标悬停在导航菜单中的子LI上时，加粗父UL

CSS or JS Solution - Bold Parent UL when hovering over child LI in a nav menu

本文关键字：上时 LI UL 菜单 解决方案 JS 鼠标 导航 悬停 CSS      更新时间：2023-09-26

将鼠标悬停在子元素LI.上时，我需要将UL Parent菜单元素中的文本加粗

我已经尝试了几种语法正确的JS解决方案，但似乎没有任何作用。我也尝试过CSS解决方案，但对于如此先进的技术，我无法理解选择器。

这是HTML结构：

var $j = jQuery.noConflict();
            var _menu  = $j(this).find('.menu-item-has-children');
            $j(_menu).mouseover(function(){
                _menu.addClass('hb_menu');
            }).mouseout(function(){;
                _menu.removeClass('hb_menu');
            });
});
.hb_menu {
	font-weight:bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<ul class="menu"><li class="menu-item menu-item-has-children"><a href="home">Top-Menu</a>
  <ul class="sub-menu" style="display:none">
    <li class="menu-item"><a href="">Link1</a></li>
    <li class="menu-item"><a href="">Link2</a></li>
   </ul></li>
</ul>
</nav>

我尝试过的每一个JS解决方案似乎都没有添加类。解决方案的无冲突模式部分是因为这是在自定义Wordpress JS文件中使用的。我知道脚本在源代码中正确地排队，任何语法错误都会立即显示在Firebug控制台中。

该菜单采用了其他CSS和JS进行格式化，并提供了一个动画下拉菜单。我没有包含任何CSS尝试，因为我确信它们纯粹是无稽之谈。

澄清当子元素（从子菜单）LI被鼠标悬停时，所需的行为是对父元素LI（.menu项具有子元素）进行样式设置。

如果我理解正确，当鼠标在Link1或Link2上时，你想用粗体显示"Top Menu"，我做了一个简单的例子，展示了如何达到这种效果：http://jsfiddle.net/y6eeyr36/

它主要基于您的代码，但在寻找应该是粗体的节点方面有一些小的差异

var $j = jQuery.noConflict();
$j(".menu-item-has-children").children().mouseover(function(){
    $j(this).parent().parent().find("a").first().addClass('hb_menu');
}).mouseout(function(){;
    $j(this).parent().parent().find("a").first().removeClass('hb_menu');
});

首先，确保用$(document).ready()包装代码，以便在加载DOM后将事件绑定到选择器。然后，由于您只关心在悬停子菜单项时，我们只将mouseover和mouseout事件附加到子菜单项。然后，我们获得子菜单项（即主菜单）的父菜单项，并将hb_menu类添加或删除到a标记中。

jQuery(document).ready(function($) {
    $(".sub-menu li").mouseover(function() {
        $(this).parents(".menu-item-has-children").children("a").addClass("hb_menu");
    }).mouseout(function() {
        $(this).parents(".menu-item-has-children").children("a").removeClass("hb_menu");
    });
});
相关文章：