Question

我有下一个菜单结构。

<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>

在此结构中，项目（a-tag）具有背景。我想在悬停事件中更改下一个项目的背景。如果我已经完成了第2项，我想改变第3项的背景。我尝试使用jQuery，但是我找不到合适的代码。

jQuery("#mymenu li a").hover(function() {
  jQuery(this).next("li a").css('background', 'none');
}

我尝试使用nextAll，使用完整的选择器路径，但我无法选择下一个元素。

Answer 1

悬停时，您想要转到父li，然后使用next()转到li，然后find('a')内的li }}：

$("#mymenu li a").hover(function() {
    $(this).parent().next().find("a").css('background', 'none');
});

Answer 2

您可以选择li并在其上附加hover事件，而不是选择锚点。在悬停中，只需使用next方法获取下一个li元素并更改背景。我假设你没有将背景设置为锚点，因为我正在改变li元素的背景。

$("#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');
}

Jquery选择下一个元素

2 个答案: