mouseleave的條件邏輯

我有一個由兩個深度的四個按鈕組成的網格，比如800px寬×400px深。將鼠標懸停在任何按鈕上都會顯示一個以按鈕爲中心的較小圖層（例如700 x 300像素）。mouseleave的條件邏輯

我將mouseenter和mouseleave事件附加到指定給所有按鈕的類中，該類爲所有按鈕交換img src，並使用單獨的函數顯示每個按鈕的特定圖層元素。

因此，當您將鼠標放在任何按鈕上時，所有按鈕都會變灰，並在其上方顯示特定圖層，並且當鼠標離開按鈕時，該圖層將隱藏並且按鈕返回到默認狀態。

這可以正常工作，但我想防止按鈕在鼠標位於可見圖層上時變回默認狀態。因此，如果將鼠標從按鈕移動到疊加在其上的圖層上，則所有按鈕都保持灰色。如果鼠標離開圖層，則該圖層將隱藏，所有按鈕將恢復爲其默認狀態。

我試過創建一個全局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();" />

，並在每一層上，我想設置全局變量var以防止mouseleave事件觸發並將按鈕重置爲其默認狀態：

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

但當然，在這裏設置全局變量爲時已經太晚了，因爲在全局變量設置爲true之前觸發了按鈕的mouseleave事件？

來源

2012-11-05 ebmudder

http://jsfiddle.net /試着在這裏舉個例子，這樣每個人都可以看到你在實際操作中描述的內容。 –

我認爲像這樣的工作

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

基本上你是做同樣的事情時頂層時在IMG交換作爲徘徊懸停

來源

2012-11-05 20:50:36 Huangism

謝謝！這工作完美！ – ebmudder

這不是一個理想的情況，但你可以使用一個變量在javascript：

var layerTimeout;

上的按鈕使用

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

而當你進入層清晰超時，它觸發前：

clearTimeout(layerTimeout);

對於你的圖片，你也可以使用超時，當你進入圖層清除兩個超時。正如我之前所說，我沒有找到這個解決方案很乾淨，但它肯定可以幫助你。

來源

2012-11-05 20:49:04

mouseleave的條件邏輯

回答

相關問題