将鼠标悬停在子元素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");
});
});