jQuery闪烁

如何解决jQuery闪烁

| 在我的一种视图中，我有一个带有以下内容的Rails 3应用程序：

<li class = \"comment\">
  ...some comment text...
  <ul class = \"actions\">
    <li><a href = \"#\">Edit</a></li>
  </ul>
</li>

然后在我的application.js中

$(\'.comment\').live(\'mouSEOver\',function() {
  $(this).show();
}).live(\'mouSEOut\',function(){
  $(this).hide();
});

问题是，当您将鼠标移到

.comment

上时，mouSEOver似乎被反复调用，从而导致

.actions

闪烁。我尝试用ѭ5替换

mouSEOver/mouSEOut

，这在某种程度上解决了问题。悬停在

.comment

上方时，

.actions

不会闪烁，但是当您将鼠标悬停在

.actions

上方时，它将可怕地闪烁。     

解决方法

        由于事件冒泡，该事件被多次调用，您要做的是：

$(\'.comment .actions\').live(\'mouseover\',function(e) {
  $(this).show();
  e.stopPropagation();
  e.preventDefault();
}).live(\'mouseout\',function(e){
  $(this).hide();
  e.stopPropagation();
  e.preventDefault();
});

    ,        您试图在隐藏元素上添加一个mouseover事件。如果它具有

display:none

（

$(this).hide()

），则无法将其悬停在鼠标上，因此也不会调用该事件。我认为您可能一直想这样做：

  $(\'.actions\').hide();
   $(\'.comment\').live(\'mouseover\',function() {
  $(this).children(\'.actions\').show();
}).live(\'mouseout\',function(){
  $(this).children(\'.actions\').hide();
}); 

示例：http：//jsfiddle.net/niklasvh/9GPVu/8/ 如果这不是您想要的内容，那么问题可能也出在您的标记上，还因为它在很多地方都被打乱了，例如ѭ13或ѭ14的结尾引号。     ,        如果您希望当用户将鼠标悬停在评论上时显示操作链接，那么我认为这更符合您的要求：

$(\'.comment\').live(\'mouseover\',function() {
  $(this).find(\'.actions\').show();
}).live(\'mouseout\',function(){
  $(this).find(\'.actions\').hide();
});