ToggleClass not all divs

Question

我正在使用一些懸停的定價表。 您可以在此處看到：http://lhit.nl/lucid/

如您所見，當您將鼠標懸停在定價表上時，所有div都會切換類。 而那不是我想要的。我希望它是分開的課程。

我的jQuery：

$('.package').hover(function(){ 
    $('.name').toggleClass('name-hover') 
    $('.price-container').toggleClass('price-hover') 
    $('.price').toggleClass('white-hover') 
    $('.month').toggleClass('white-hover') 
}); 

的CSS只是來覆蓋當前的顏色：

.package .price-hover { 
     background: #008ed6; 
    } 

    .package .white-hover { 
     color: #fff; 
    } 

我已經嘗試過使用$（本），但它不工作。

Answer 1

$('.package').hover(function(){ 
    $(this).find('.name').toggleClass('name-hover') 
    $(this).find('.price-container').toggleClass('price-hover') 
    $(this).find('.price').toggleClass('white-hover') 
    $(this).find('.month').toggleClass('white-hover') 
}); 

Answer 2

• 首先，你需要使用find只更改元素 內目前盤旋在.package類，所有這些元素否則會 轉班。
• 其次，hover事件需要 2個函數，一個是鼠標進入懸停區域時，另一個是光標 退出懸停區域。處理hover事件的方式，它會切換兩次，一次懸停，一次懸停，最後保持不變。

試試這個代碼：

$('.package').hover(function(){ 
    $(this).find('.name').addClass('name-hover'); 
    $(this).find('.price-container').addClass('price-hover'); 
    $(this).find('.price').addClass('white-hover'); 
    $(this).find('.month').addClass('white-hover'); 
}, function(){ 
    $(this).find('.name').removeClass('name-hover'); 
    $(this).find('.price-container').removeClass('price-hover'); 
    $(this).find('.price').removeClass('white-hover'); 
    $(this).find('.month').removeClass('white-hover'); 
}); 

Answer 3

你可以使用每個（）：

$('package').each(function() { 
    var _this = this; 
    $(this).hover(function() { 
     $(_this).find('.name').toggleClass('name-hover') 
     $(_this).find('.price-container').toggleClass('price-hover') 
     $(_this).find('.price').toggleClass('white-hover') 
     $(_this).find('.month').toggleClass('white-hover') 
    }); 
    }) 

Answer 4

$(".package").hover(function() { 
    $this = $(this); 
    $this.find(".name").toggleClass("name-hover"); 
    $this.find(".price-container").toggleClass("price-hover"); 
    $this.find(".price,.month").toggleClass("white-hover"); 
}); 

@Spartak Lalaj在jQuery 1.4 .hover（）可以有一個參數。見https://api.jquery.com/hover/

Answer 5

這可以簡單地通過CSS來實現。爲什麼要爲此添加Js？

package:hover .price-container{ 
    background: #008ed6; 
}