jquery - 将鼠标悬停在子菜单上时防止导航项上的 jquery 背景图像精灵动画

Question

我有以下脚本处理导航栏中项目的背景图像动画：

$j(function() {
   $j(".menu-item").find(".bottom_nav").hover(function () {
      $j(this).animate( {
         backgroundPosition : '0px 35px'}
      , 300); }
   , function () {
      $j(this).animate( {
         backgroundPosition : '0px 0px'}
      , 600); }
   ); 
});

这很好用，除了当导航项有一个子菜单并且用户将鼠标悬停在子菜单上时，我不希望此函数中的第二个动画触发，即我希望 backgroundPosition 保持为“0px 35px”。这将按原样工作，但子菜单位于 .bottom_nav div 之外。菜单/子菜单的标记结构由 Wordpress 主题处理，我不知道如何更改它。这是一个屏幕截图，可以让您了解标记：

如您所见<ul class="sub-menu">，它位于 .bottom_nav div 之外。

您可以在此页面上看到正在运行的导航项。导航栏中名为“新闻”的第二项有一个下拉子菜单，我希望导航项“新闻”上的背景颜色在悬停在此子菜单上时保持绿色。

Answer 1

我通过添加以下内容对此进行了排序：

$j(function() {
   $j(".sub-menu").hover(function () {
      $j(this).closest('.menu-item').find(".bottom_nav").stop().animate( {
         backgroundPosition : '0px 35px'}
      , 300); }
   , function () {
      $j(this).closest('.menu-item').find(".bottom_nav").stop().animate( {
         backgroundPosition : '0px 0px'}
      , 600); }
   ); 
});