Conditional logic for mouseleave

Question

I have a four-two-button grid of buttons, say 800 pixels wide by 400 pixels. Blurring over any button shows a smaller layer centered on the buttons (say, 700 x 300 pixels).

I am attaching mouseenter and mouseleave events to a class assigned to all buttons, which changes the img src number for all buttons and a separate function to display a specific layer element for each button.

Thus, when you hover over any button, all buttons are grayed out and a specific layer is displayed on top of them, and when the mouse leaves the button, the layer is hidden and the buttons return to their default state.

This works fine, but I want the buttons not to return to their default state when the mouse is above the visible layer. Therefore, if you move the mouse from the button to the layer located above it, all buttons remain gray. If the mouse leaves the layer, the layer is hidden and all buttons return to their default state.

I tried creating a global javascript var to prevent the mouseleave event from firing when the mouse is above the visible layer, and setting this var when the mouse enters the visible layer, but the mouseleave event fires before I can set the global var ... I am caught in a rooster with chicken and egg?

I set my mouse cursor / leave here:

window.lyrEntered = false; jQuery(function () { $(".img-swap").mouseenter( function () { $(".img-swap").each(function () { this.src = this.src.replace("_on", "_off"); }); }); $(".img-swap").mouseleave( function () { //if layer entered, keep button state if (lyrEntered) { } else { //reset buttons if layer entered is false $(".img-swap").each(function () { this.src = this.src.replace("_off", "_on"); //reset button state window.lyrEntered = false; }); }; }); }); function showIt(lyr) { $(lyr).show(); } 

on each button, I set the layer to display:

 <img src="images/img1.jpg" alt="img1" class="img-swap" id="img1" onmouseover="showIt('#layer1');" onmouseout="$('#layer1').hide();" /> 

and on each layer, I try to set a global var to prevent the mouseleave event from firing and reset the buttons to their default state:

 <div id="layer1" onmouseout="$('#layer1').hide();window.lyrEntered = false;" onmouseover="$('#layer1').show();window.lyrEntered = true; ">[content here]</div> 

but, of course, setting the global var here is too late, because the button mouseleave event is fired before the global var can be set to true?

Answer 1

I would think something like this would work

 $('your_top_layer_element').on('mouseenter', function() { $(".img-swap").each(function () { this.src = this.src.replace("_on", "_off"); }); }); 

Basically you do the same when you hover over this top layer, as if it were hovering over img-swap

Answer 2

This is not an ideal situation, but you can use a variable in javascript:

 var layerTimeout; 

On buttons use

 onmouseout="layerTimeout = setTimeout(function(){$('#layer1').hide();},100);" 

And when you enter the layer, clear the timeout before it starts:

 clearTimeout(layerTimeout); 

You can also use a timeout for your image, and when you enter a layer, clear both timeouts. As I said, I do not think this solution is very clean, but it will certainly help you.