Conditional logic for mouseleave

Question

I have a grid of buttons four across by two deep, say 800px wide by 400px deep. Mousing over any button shows a smaller layer centered over the buttons (say 700 x 300 px).

I'm attaching the mouseenter and mouseleave events to a class assigned to all the buttons, which swaps the img src for all the buttons, and a separate function to show the specific layer element for each button.

So when you mouse over any button, all the buttons are greyed 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 the default state.

This works fine, but I want to prevent the buttons from changing back to their default state when the mouse is over the visible layer. So if you move the mouse from the button onto the layer superimposed above it, all the buttons remain greyed out. If the mouse leaves the layer, then the layer is hidden and all the buttons revert to their default state.

I've tried creating a global javascript var to prevent the mouseleave event from firing when the mouse is over the visible layer, and setting that var when the mouse enters the visible layer, but the mouseleave event fires before I can set the global var...I'm caught in a chicken-and-egg loop?

I'm setting my mouseenter/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'm setting 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'm trying to set the global var to prevent the mouseleave event from firing and resetting 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's mouseleave event is triggered before the global var can be set to true?

Answer 1

It's not an ideal situation, but you could use a variable in javascript:

var layerTimeout;

On the buttons use

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

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

clearTimeout(layerTimeout);

For your image u can also use a timeout and when you enter the layer clear both timeouts. As i said before i don't find this solution very clean, but it can surely help you out.