Dan Dan - 6 months ago 31
jQuery Question

JQuery hover effect issue

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:

enter image description here


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