5

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

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

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

这很好用，但我想防止当鼠标悬停在可见层上时按钮变回默认状态。因此，如果您将鼠标从按钮移动到叠加在其上方的图层上，所有按钮都将保持灰色。如果鼠标离开图层，则图层被隐藏，所有按钮都恢复到默认状态。

我尝试创建一个全局 javascript var 以防止当鼠标在可见层上方时触发 mouseleave 事件，并在鼠标进入可见层时设置该 var，但在我可以设置全局 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();" />

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

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

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

4

2 回答 2

1

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

var layerTimeout;

关于按钮使用

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

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

clearTimeout(layerTimeout);

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

于 2012-11-05T20:49:04.053 回答
0

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

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

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

于 2012-11-05T20:50:36.660 回答