如何使用jQuery添加懸停類

我試圖在頁面加載時實現所有<div>效果。如何使用jQuery添加懸停類

jQuery('.postCenter').addClass("hiddenClass").viewportChecker({ 
     classToAdd: 'visibleClass animated bounce', 
     offset: 200 
     });

現在頁面加載時，這是唯一的工作。我需要相同的效果，當我通過鼠標懸停鼠標<div>

我試過這個，但沒有奏效。

$('.nom-img').hover(function(){ 

    $('.tag-nom').removeClass('animated'); 
    $('.tag-nom').removeClass('bounce'); 

    $('.tag-nom').addClass('animated'); 
    $('.tag-nom').addClass('bounce'); 
});

我的標記是這樣的：

<div class="col-md-4 col-sm-4 col-xs-12 postLeft"> 
    <h2>Topeka, Kansas</h2> 
    <div class="nom-img"> 
    <a href="topeka.html"><img src="img/xxxxxx"></a> 
    </div> 
    <div class="tag-nom postCenter"> <a href="#"><img src="XXX"></a> 
     <h4><a href="#">vsdvsdvsdvsdv</a></h4> 
    </div> 
</div>

我想tag-nom當我將鼠標懸停在div nom-img

我有這樣的列6動畫。所以只有對應的tag-nom應該懸停在動畫上。我怎樣才能做到這一點？

來源

2014-12-03 user1012181

你必須使用什麼是$（本）選擇，而不是類選擇中添加的懸停功能。 – Andi 2014-12-03 14:40:41

您需要修改懸停功能以接受兩種方法，即：分別爲mouseenter和mouseleave。您還需要針對.tag-nom是懸停元素的下一個同級元素：

$('.nom-img').hover(function(){ 
    $('.tag-nom').not($(this).next()).removeClass('animated bounce') 
    $(this).next().addClass('animated bounce'); 
},function(){ 
    $(this).next().removeClass('animated bounce'); 
});

來源

2014-12-03 14:41:25

感謝它的工作:) – user1012181 2014-12-03 14:46:35

@ user1012181：請標記答案，如果它幫助你，它會幫助別人知道whcih是最有用的答案 – BNN 2014-12-03 14:58:00

@Milind Anantwar，在第一次懸停時，此操作不起作用。當我再次懸停時，它可以工作。當我向下滾動並上升時，即使沒有懸停，效果也會再次顯示。可能是什麼問題？ – user1012181 2014-12-05 15:46:42

試試這個：

$('.nom-img').hover(function(){ 

    $('.tag-nom').addClass('animated').addClass('bounce'); 
}, function(){ 

    $('.tag-nom').removeClass('animated').removeClass('bounce'); 
});

來源

2014-12-03 14:42:46 ArinCool

如何使用jQuery添加懸停類

回答

相關問題