Jquery select next element
I have the next menu structure.
<li class="menu-422"><a href="item-1" title="">Item 1</a></li>
<li class="menu-444"><a href="item-2" title="">Item 2</a></li>
<li class="menu-449"><a href="item-3" title="">Item 3</a><开发者_如何学运维/li>
<li class="menu-452"><a href="item-4" title="">Item 4</a></li>
In this structure the items (the a-tag) have background. I want to change the background of the next item on hover event. If I'm over the Item 2 I want to change the background of the Item 3. I tried it with jQuery, but I didn't find the appropriate code.
jQuery("#mymenu li a").hover(function() {
jQuery(this).next("li a").css('background', 'none');
}
I tried it with nextAll, with full selector path, but I can't select the next element.
Upon hover, you want to go up to the parent li
, then use next()
to get to the next li
, then find('a')
inside of that li
:
$("#mymenu li a").hover(function() {
$(this).parent().next().find("a").css('background', 'none');
});
Instead of selecting the anchors you can just select li
and attach hover
event on it. And in the hover just use next
method to get the next li
element and change the background. I am assuming you dont have background set to the anchor's because I am changing the background of the li element.
$("#mymenu li").hover(function() {
$(this).next().css('background', 'none');
//If you want to change the background of anchor try this
//$(this).next().find('a').css('background', 'none');
}
精彩评论