JQuery悬停效果问题(JQuery hover effect issue)

在我开始之前，我的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 });
    })  
})
 
 这是一张图片来说明我的最终目标： 
 
  
Before I start my JS knowledge isn't the best! However, I have tried to give this a go! Basically I have three image stacked on top of eachother and if I hover each of them it dims the other two out - along with this each image has some text and the text does the same so if you hover over the layer assocaited to that text it dims out the other two. this works up until the point you say mouse out from the last hovered image and it stays in its animated state and does not return to normal.
 
<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 });
    })  
})
 
Here is an image to illustrate my end goal:
 

                
最满意答案
                
                    
                        
 每当您在图片上方悬停时，您都在创建mouseleave事件侦听器： 
 
 我认为这是你的目标： https ： //jsfiddle.net/eosrphsa/ 
 
 另外，最后一个jQuery选择器只有$('.bottom').mouseleave我认为你想要$('.bottom, .layer-three-text'). 。 
You were creating the mouseleave event listener every time you hovered over the image:
 
I think this is what you were going for: https://jsfiddle.net/eosrphsa/
 
Also, the last jQuery selector was only $('.bottom').mouseleave where I think you wanted $('.bottom, .layer-three-text')..