[英]jQuery hover over an li that excludes the children of the element
I have a Wordpress-menu with a submenu. 我有一个带有子菜单的Wordpress菜单。 I've added an arrow to the
li
element that has a submenu inside. 我在
li
元素中添加了一个箭头,里面有一个子菜单。 When the mouse goes over the a
inside the li
it makes an hover animation with CSS. 当鼠标越过
a
内li
它与CSS的悬停动画。 Now I wanted to extend the animation to the arrow that is inside a span
element inside the a
tag. 现在我想将动画扩展到
a
标签内span
元素内的箭头。 I did it with jQuery, 我是用jQuery做的,
$('nav ul li.menu-item-has-children').hover(function() {
$('nav ul li a span.arrow').css('color', '#fff');
}, function() {
$('nav ul li a span.arrow').css('color', '#be1722');
});
But when the submenu is opened and the mouse is over it, the arrow remains white. 但是当打开子菜单并且鼠标悬停在它上面时,箭头仍然是白色的。 How can avoid this?
怎么能避免这个?
This is the structure of my menu: 这是我菜单的结构:
<nav>
<li class="menu-item-has-children">
<a>Menu item with sub menu</a><span class="arrow">arrow</span>
<ul>
<li>
<a>Sub menu link</a>
</li>
</ul>
</li>
</nav>
I tried also with this: 我也试过这个:
$('nav ul li.menu-item-has-children a').hover(function() {
$('nav ul li a span.arrow').css('color', '#fff');
}, function() {
$('nav ul li a span.arrow').css('color', '#be1722');
});
But if I hover an a
tag in the submenu the function starts again and the arrow turns white. 但是如果我在子菜单中悬停
a
标签,该功能将再次启动,箭头将变为白色。
Can anyone help me? 谁能帮我?
Your element is <span>arrow</span>
;. 您的元素是
<span>arrow</span>
;. But span.arrow
in $('nav ul li a span.arrow')
searches for a <span>
element with a class .arrow
. 但
span.arrow
在$('nav ul li a span.arrow')
搜索一个<span>
元件与类.arrow
。 And there is no such class assigned to your <span>
element. 并且没有为您的
<span>
元素分配此类。
Use this: 用这个:
<span class="arrow">arrow</span>
The selector $('nav ul li a span.arrow')
searches for <span>
inside(child of) <a>
. 选择器
$('nav ul li a span.arrow')
搜索<span>
inside(child of) <a>
。
The span
element is not the child of a
but its sibling, use +
instead of a space in the selector. 该
span
元素不是的孩子a
,但它的兄弟姐妹,使用+
而不是在选择的空间。
$('nav ul li.menu-item-has-children a').hover(function() {
$('nav ul li a+span.arrow').css('color', '#fff');
}, function() {
$('nav ul li a+span.arrow').css('color', '#be1722');
});
See Next adjacent Selector (“prev + next”) 请参阅下一个相邻选择器(“prev + next”)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.