mouseleave的条件逻辑

Question

我有一个四跨两深的按钮网格，比如800px宽，400px深。鼠标悬停在任何按钮上都会显示一个位于按钮中心的较小层(例如700 x 300像素)。

我将mouseenter和mouseleave事件附加到一个分配给所有按钮的类中，该类交换所有按钮的img src，并使用一个单独的函数来显示每个按钮的特定层元素。

因此，当您将鼠标悬停在任何按钮上时，所有按钮都将灰显，并且在它们的顶部显示一个特定的层；当鼠标离开按钮时，该层将隐藏，按钮将返回到默认状态。

这可以很好地工作，但我希望当鼠标位于可见层上时，按钮不会更改回默认状态。因此，如果将鼠标从按钮移动到叠加在其上方的层上，则所有按钮都将保持灰色。如果鼠标离开该层，则该层将被隐藏，并且所有按钮都将恢复到其默认状态。

我已经尝试创建一个全局javascript var，以防止在鼠标位于可见层上时触发mouseleave事件，并在鼠标进入可见层时设置该var，但mouseleave事件在我可以设置全局变量之前触发...我是否陷入了鸡和蛋的循环？

我正在设置我的鼠标进入/离开这里：

    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();" />

在每一层上，我尝试设置全局var，以防止mouseleave事件触发并将按钮重置为默认状态：

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

但是当然，在这里设置全局var已经太晚了，因为按钮的mouseleave事件是在全局var设置为true之前触发的？

Answer 1

我想像这样的东西会有用的

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

基本上，当您将鼠标悬停在顶层上时，所做的事情与悬停在img-交换上时所做的相同。

Answer 2

这不是一个理想的情况，但是你可以在javascript中使用一个变量：

var layerTimeout;

在按钮上使用

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

当你进入图层时，在它触发之前清除超时：

clearTimeout(layerTimeout);

对于你的图像，你也可以使用超时，当你进入图层时，清除两个超时。正如我之前所说的，我发现这个解决方案不是很干净，但它肯定可以帮助你解决问题。