爲什麼這兩個事件只能運行一次纔會重複觸發？

我已經寫了下面的代碼，它應該顯示一個div時，在另一個div被挖空，代碼工作，但是，這些事件被重複觸發爲什麼？爲什麼這兩個事件只能運行一次纔會重複觸發？

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      #my-div { 
       width: 100px; 
       height: 100px; 
       background-color: red; 
      } 
      .tooltip { 
       width: 200px; 
       height: 200px; 
       background-color: red; 
       display: none; 
      } 
     </style> 
     <script src="jquery.min.js"></script> 
    </head> 

    <body> 
     <div id="my-div"></div> 
     <div class="tooltip"></div> 
     <script type="text/javascript"> 
        $('#my-div').on('mouseover', function() { 
         $('.tooltip').fadeIn(300); 
        }); 
        $('#my-div').on('mouseleave', function() { 
         $('.tooltip').fadeOut(300); 
        }); 

     </script> 
    </body> 
</html>

來源

2013-10-03 ilgaar

對我來說工作正常http://jsfiddle.net/QaJp4/。 –

當鼠標進入或離開（occordigly）有關標籤**或它的一個後代**時觸發鼠標懸停和鼠標懸停** – Stphane

您應該使用mouseenter而不是mouseover，因爲mouseover總是在將鼠標移動到目標中時觸發。

而對於更多，您應該添加stop()來停止和fadeIn()動畫觸發器，與用戶快速移入和移出鼠標時同時停止。

$('#my-div').on('mouseenter', function() { 
    $('.tooltip').stop().fadeIn(300); 
}); 
$('#my-div').on('mouseleave', function() { 
    $('.tooltip').stop().fadeOut(300); 
});

來源

2013-10-03 12:29:19 Chokchai

我發現了，這是什麼問題，我用的結尾和它似乎有奇怪的錯誤，我嘗試了所有其他的瀏覽器，它的工作原理確定。我寫了這個代碼，它似乎對主流瀏覽器工作正常，但由於某種原因科達拒絕正常運行：當鼠標進入

 function Tooltip() { 

      this.showToolTip = function() { 
       $(this.element).on('mouseenter', function(event) { 
        event.preventDefault(); 
        $(that.tooltip).stop().fadeIn(300); 
       }); 
      }; 

      this.hideToolTip = function() { 
       $(this.element).on('mouseleave', function(event) { 
        event.preventDefault(); 
        $(that.tooltip).stop().fadeOut(300); 
       }); 
      }; 

      this.element = arguments[0]; 
      this.tooltip = arguments[1]; 
      var that = this; 
     }

來源

2013-10-03 12:24:35 ilgaar

注意，鼠標懸停和鼠標移開時被觸發或離開（occordigly）有關標籤，它還是一個的後代

你不會看到你的爲例，因爲提示已經在消退.. 試試這個..

$('#my-div').on('mouseover', function() { 
    $('body').append('<span>one more time </span>'); 
    $('.tooltip').fadeIn(300); 
});

小提琴here

來源

2013-10-03 12:28:12 Stphane

爲什麼這兩個事件只能運行一次纔會重複觸發？

回答

相關問題