Question

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

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

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

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

我已经尝试创建一个全局javascript var来防止鼠标在可见图层上时触发mouseleave事件，并在鼠标进入可见图层时设置该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

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

var layerTimeout;

在按钮上使用

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

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

clearTimeout(layerTimeout);

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

Answer 2

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

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

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

mouseleave的条件逻辑

2 个答案: