ruby on rails - jQuery Flickering

Question

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

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

然后在我的应用程序.js 中

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

问题是，当您将鼠标移到.comment上时，鼠标悬停似乎会被重复调用，从而导致.actions闪烁。我试着用mouseenter/mouseleave代替mouseover/mouseout，这在一定程度上解决了问题。当鼠标悬停在.comment上时，.actions不会闪烁，但当鼠标悬停于.actions本身的顶部时，它会可怕地闪烁。

Answer 1

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

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

Answer 2

您正试图在隐藏元素上添加鼠标悬停事件。如果它有一个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/

如果这不是你想要的，那么问题也可能出现在你的标记中，因为它在很多部分都被破坏了，比如a href或ul class的无尾引号。

Answer 3

如果你想在用户悬停在评论上时显示操作链接，那么我认为这更符合你的要求：

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