jQuery懸停效果問題

Question

在我開始之前，我的JS知識不是最好的！ 但是，我嘗試了一下！ 基本上，我在彼此的頂部堆疊了三個圖像，如果將它們懸停在另一個圖像上，則會使其他兩個圖像變暗-與此圖像一起，每個圖像都有一些文本，並且文本也一樣，因此，如果將鼠標懸停在與該文本相關的圖層上調暗其他兩個。 直到您說鼠標從最后一個懸停的圖像移出為止，它一直處於動畫狀態，並且不會恢復正常。

<img class="image-grass top" src="<?php bloginfo('template_url'); ?>/assets/images/top-grass-layer.png" />
<img class="image-grass middle" src="<?php bloginfo('template_url'); ?>/assets/images/middle-grass-layer.png" />
<img class="image-grass bottom" src="<?php bloginfo('template_url'); ?>/assets/images/bottom-grass-layer.png" />    

<p class="layer-one-text">Roll out the artificial grass and fix around the perimeter with turf pins.</p>
<p class="layer-two-text">Lay out the Sportsbase panels and interlock them together to form a continuous platform. The panels are manufactured from recycled plastic and the hollow design provides cushioning for comfort and drainage for water removal.</p>
<p class="layer-three-text">Select a flat area of grass, earth, concrete or Tarmac. Fill any obvious hollows with sand.</p> 

$('.top, .layer-one-text').mouseenter( function() { 
    $('.middle, .layer-two-text, .bottom, .layer-three-text').stop(true, true).animate({ opacity: 0.3 });
    $('.top, layer-one-text').mouseleave( function(){
        $('.middle, .layer-two-text, .bottom, .layer-three-text').animate({ opacity: 1 });
    })
})

$('.middle, .layer-two-text').mouseenter( function() { 
    $('.top, .layer-one-text, .bottom, .layer-three-text').stop(true, true).animate({ opacity: 0.3 });
    $('.middle, .layer-two-text').mouseleave( function(){
        $('.top, .layer-one-text, .bottom, .layer-three-text').animate({ opacity: 1 });
    })  
})

$('.bottom, .layer-three-text').mouseenter( function() { 
    $('.middle, .layer-two-text, .top, .layer-one-text').stop(true, true).animate({ opacity: 0.3 });
    $('.bottom').mouseleave( function(){
        $('.middle, .layer-two-text .top, .layer-one-text').animate({ opacity: 1 });
    })  
})

這是說明我的最終目標的圖像：

Answer 1

我認為-沒有任何的jsfiddle測試-你應該撤消mouseenter是這樣的：

$('.top, .layer-one-text').mouseenter( function() { 
    $('.middle, .layer-two-text, .bottom, .layer-three-text').stop(true, true).animate({ opacity: 0.3 });
    })
}).mouseleave(function() {
    $('.middle, .layer-two-text, .bottom, .layer-three-text').animate({ opacity: 1 });
});

當您在元素上時，您正在觸發mouseleave函數，這沒有任何意義。

此函數還具有.bottom和.layer-three-text元素進行動畫處理。 這個對嗎？

Answer 2

嘗試使用.on('hover', function(){})而不是.mouseenter 。 使用mouseenter您必須專門編寫mouseout代碼，這會在這里引起問題。 懸停此問題應得到解決。

Answer 3

每次將鼠標懸停在圖像上時，您都在創建mouseleave事件偵聽器：

我認為這就是您要去的地方： https ： //jsfiddle.net/eosrphsa/

另外，最后一個jQuery選擇器只是$('.bottom').mouseleave ，我認為您想要$('.bottom, .layer-three-text'). 。