mouseleave的条件逻辑

Question

我有一个按钮四个网格,两个深,比如800px宽,400px深.将鼠标悬停在任何按钮上会在按钮上方显示一个较小的图层(例如700 x 300像素).

我将mouseenter和mouseleave事件附加到分配给所有按钮的类,它将交换所有按钮的img src,以及一个单独的函数来显示每个按钮的特定图层元素.

因此,当您将鼠标悬停在任何按钮上时,所有按钮都显示为灰色,并且在其上方显示特定图层,当鼠标离开按钮时,图层将被隐藏,按钮将返回默认状态.

这样可以正常工作,但是当鼠标悬停在可见图层上时,我想阻止按钮更改回默认状态.因此,如果将鼠标从按钮移动到叠加在其上方的图层上,则所有按钮都保持灰色.如果鼠标离开图层,则隐藏图层并且所有按钮都恢复为默认状态.

我已经尝试创建一个全局javascript var来防止当鼠标在可见层上时触发mouseleave事件,并在鼠标进入可见层时设置该var,但是在我可以设置全局var之前触发mouseleave事件. ..我被鸡蛋和蛋圈住了？

我正在设置我的mouseenter /离开这里:

    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();
    }

在每个按钮上,我正在设置要显示的图层:

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

在每一层,我试图设置全局变量以防止mouseleave事件触发并将按钮重置为默认状态:

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

但是,当然,在这里设置全局变量为时已晚,因为在全局变量设置为true之前触发了按钮的mouseleave事件？

Answer 1

我认为这样的事情会起作用

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

基本上，当鼠标悬停在顶层时，你会做与悬停在 img-swap 上时相同的事情