移动到下一个菜单项时删除课程

Question

我有一个由以下HTML组成的简单导航栏;

<div class="inner"> 
<div class="button"><img class="portal" src="images/portalbutton.png" /></div> 
<a href="#"><div class="prod_description">&nbsp;</div></a> 
</div> 

有一些项目（所有设置左边浮动彼此）组成一个导航栏。

当我将鼠标悬停在.button和/或.prod_description我想.inner<div>有类.hover添加到它。这样我就可以在整个事物上设置一个背景图像（有点像突出显示导航项目）。

我只想删除.hover，而另一个.button or .prod_description被移走，在这种情况下，此导航项采用.hover类。

Answer 1

当我将鼠标悬停在.button和/或.prod_description我想.inner<div>有类.hover添加到它。

除非你的CSS是以一种非常聪明的方式定位事物，否则这与徘徊.inner本身是一样的吧？如果是这样，该任务可以解决了一样容易：

$('.inner').hover(function() { 
    $('.inner').removeClass('hover'); 
    $(this).addClass('hover'); 
}); 

如果我的上述定位假设不成立，该代码将不得不寻找更多这样的：

$('.inner .button, .inner .prod_description').hover(function() { 
    $('.inner').removeClass('hover'); 
    $(this).parents('.inner').addClass('hover'); 
}); 

在后面代码示例，请注意使用parents() - 不要与parent()混淆。

Answer 2

有了这个小改变你的HTML，JavaScript的将是一个比较容易写：

<div class="inner"> 
    <div class="button"><img class="portal" src="images/portalbutton.png" /></div> 
    <div class="prod_description"><a href="#">stuff</a></div> 
</div> 

然后，你Javscript功能看起来是这样的。当您悬停一个项目时，它会从所有项目中移除hover类，并将其应用于当前项目。那样的话，hover班将会留下，即使离开物品。

$(document).ready(function() { 
      $('div.button, div.prod_description').mouseover(function() { 
       $('div.inner').removeClass('hover'); 
       $(this).parent().addClass('hover'); //The HTML change was to allow the call to parent() to be the same 
      }); 
     }); 

Answer 3

试试这个：

$(document).ready(function(){ 
    $(".button").hover(
    function() { 
     $(".inner").removeClass("hover"); 
     $(this).parent(".inner").addClass("hover"); 
    }, 
    function() {} 
); 
$(".prod_description").hover(
    function() { 
     $(".inner").removeClass("hover"); 
     $(this).parent("a").parent("inner").addClass("hover"); 
    }, 
    function() {} 
); });