5

ボタンのグリッドが4つ、横に2つ、たとえば幅が800ピクセル、奥行きが400ピクセルです。ボタンの上にマウスを置くと、ボタンの中央に小さなレイヤーが表示されます（たとえば、700 x 300ピクセル）。

すべてのボタンに割り当てられたクラスにmouseenterイベントとmouseleaveイベントをアタッチします。これにより、すべてのボタンのimg srcが交換され、各ボタンの特定のレイヤー要素を表示する個別の関数が作成されます。

したがって、いずれかのボタンの上にマウスを置くと、すべてのボタンがグレー表示され、その上に特定のレイヤーが表示されます。マウスをボタンから離すと、レイヤーが非表示になり、ボタンはデフォルトの状態に戻ります。

これは正常に機能しますが、マウスが表示されているレイヤー上にあるときにボタンがデフォルトの状態に戻らないようにします。したがって、マウスをボタンからその上に重ねられたレイヤーに移動すると、すべてのボタンがグレー表示されたままになります。マウスがレイヤーを離れると、レイヤーは非表示になり、すべてのボタンがデフォルトの状態に戻ります。

マウスが可視レイヤー上にあるときにmouseleaveイベントが発生しないようにグローバルjavascriptvarを作成し、マウスが可視レイヤーに入るときにそのvarを設定しようとしましたが、グローバルvarを設定する前にmouseleaveイベントが発生します。 ..私は鶏と卵のループに巻き込まれていますか？

ここでmouseenter/Leaveを設定しています：

    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イベントがトリガーされるからです。

4

2 に答える 2

1

これは理想的な状況ではありませんが、javascriptで変数を使用できます。

var layerTimeout;

ボタンで使用

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

そして、レイヤーに入るとき、それが起動する前に、タイムアウトをクリアします：

clearTimeout(layerTimeout);

画像の場合、uはタイムアウトを使用することもでき、レイヤーに入るときに両方のタイムアウトをクリアします。私が前に言ったように、私はこの解決策があまりきれいであるとは思いませんが、それは確かにあなたを助けることができます。

于 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 に答える