如何使用 jQuery 更改 NEXT 项目的背景？

Posted 2023-02-25

【中文标题】如何使用 jQuery 更改 NEXT 项目的背景？

【英文标题】：How can I change the background of NEXT item with jQuery?

【发布时间】：2013-01-10 14:39:09

【问题描述】：

我有以下方法，但我无法使其工作。我想在鼠标悬停时删除以下 li-tag 的背景。

我的代码：

<div id="mainmenu">
  <ul>
          <li><a href="index.php?id=2"  >Das Hotel</a></li>
          <li><a href="index.php?id=3"  >Angebote</a></li>
          <li><a href="index.php?id=4"  >Reservierung</a></li>
          <li><a href="index.php?id=5"  >Kontakt</a></li>
          <li><a href="index.php?id=6"  >Anfahrt</a></li>
          <li><a href="index.php?id=7"  >Rechtliches</a></li>
          <li><a href="index.php?id=8"  >Impressum</a></li>
  </ul>
</div>

jQuery：

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

这里是小提琴：

http://jsfiddle.net/bQxJu/2/

【问题讨论】：

$(this).parent() 是一个li。所以$(this).parent().next().find("li") 不会找到任何东西。

还认为您需要将其更改回来，一旦悬停离开。

【参考方案1】：

http://jsfiddle.net/bQxJu/6/

JS 有错误，所以我必须修复它。我还添加了一个“鼠标移出”事件处理程序来放回背景。此外，您将 LI 的 BG 设置为“无”，但您的 CSS 在锚点上有背景，而不是 li。

这是 JS：

$("#mainmenu ul li a").hover(function () 
   $(this).closest('li').next().find("a").css('background', 'none');
, function () 
   $(this).closest('li').next().find("a").css('background', '');
);

【讨论】：

感谢您的快速回复。我现在完全按照您在此处编写的操作并将其与 Fiddle 进行了比较，但在我的页面上它仍然无法正常工作：vorschau9.mierau.de 这怎么可能？鼠标悬停时下一个 li 上的分隔线图形应该被隐藏..

您遇到了 javascript 错误。您正在访问 jquery 的 $，但看起来 $ 不存在，当 jQuery 在“无冲突”模式下运行时就是这种情况。如果您将$(window) 更改为jQuery(window)，您将看到JS 错误消失（尽管由于$，悬停方法仍然会失败）。我不确定为什么你的 jquery 库被设置为 noConflict 模式，但那是我的预感。

【参考方案2】：

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