動態內容鼠標輸入和輸出

我有一些使用json字符串中的數據創建的div。他們大多數是圖像。在這些動態加載的圖像上，當鼠標懸停時顯示div，並在鼠標懸停時隱藏。因此我使用了實時功能，在論壇上找到它。鼠標懸停功能可以工作，但不會鼠標懸停。所以當我懸停一個圖像的div顯示出來，但是當我將鼠標移出div時仍然可見。對此有何建議？動態內容鼠標輸入和輸出

我的代碼

<script type="text/javascript"> 
    $('.product').live("hover", function() { 
     $(this).find('.product').stop(false,true); // get the image where hovering 
     $(this).find('div.caption').stop(false,true).fadeIn(100); // and fade in 
    }, 
    function() { 
     $(this).find('.product').stop(false,true); // on mouse leave hide it 
     $(this).find('div.caption').stop(false,true).fadeOut(100); // fade out 
    }); 
</script>

修訂ANSWER 感謝的幫助下我找到了解決辦法。

$(".productsGrid .product").live("mouseenter", function() {$(this).find('.product').stop(false,true); 
$(this).find('div.caption').stop(false,true).fadeIn(100);}) 
$(".productsGrid .product").live("mouseleave", function() { $(this).find('.product').stop(false,true); 
$(this).find('div.caption').stop(false,true).fadeOut(100);});

來源

2012-09-28 Meules

嘗試使用mouseenter而不是懸停 –

@KaiQing - .hover（）綁定mouseenter和mouseleave事件的處理程序。 – j08691

如果你正在使用jQuery 1.7.2或更高，你應該切換到on（）我有問題，因爲它已被棄用，使用1.7.2時出現錯誤。 – Huangism

的問題是，live只需要一個函數參數，而不是2，該hover功能的方式做。使用hover和live基本上只是將一個函數綁定到mouseenter和mouseleave。

你可以看到一個解釋和解決方案here。

但是，除非您使用1.7版本之前的jquery版本，否則不應使用live，因爲它已過時。你應該改用on。

您的代碼將是這個樣子：

$(STATIC ANCESTOR).on({ 
     mouseenter: 
      function() 
      { 

      }, 
     mouseleave: 
      function() 
      { 

      } 
     }, ".product" 
    );

凡STATIC ANCESTOR被置換成沒有動態加載的.product元素的祖先元素。如果需要，可以使用document，但只能用作最後的手段。

來源

2012-09-28 21:08:55

好吧thx ...這對我有用！我用正確的答案更新了我的問題， ' – Meules

動態內容鼠標輸入和輸出

回答

相關問題