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