当鼠标悬停在子菜单上时，防止导航项上的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之外。

您可以在this page上查看导航项目。导航栏中名为“新闻”的第二个项目有一个下拉子菜单，我希望导航项“新闻”上的背景颜色在将鼠标悬停在此子菜单上时保持绿色。

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); }
   ); 
});