移動到下一個菜單項時刪除課程

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