为什么这两个事件只能运行一次才会重复触发？

我已经写了下面的代码，它应该显示一个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

为什么这两个事件只能运行一次才会重复触发？

回答

相关问题