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'). 。