jQuery vacillant

Question

J'ai une application Rails 3 w/ce qui suit dans un de mes vues:

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

Puis dans mes application.js

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

Le problème est que lorsque vous déplacez votre souris mouseover semble être appelé à plusieurs reprises, ce qui provoque .actions à scintiller. J'ai essayé de remplacer mouseover/mouseout avec mouseenter/mouseleave qui résout un peu le problème. .actions ne scintille pas lorsque vous passez la souris sur .comment mais il clignote alors horriblement lorsque vous passez la souris sur le .actions lui-même.

Answer 1

L'événement est appelé plus d'une fois en raison à l'événement bouillonnement, ce que vous voulez faire est:

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

Answer 2

Vous essayez d'ajouter un événement mouseover sur un élément masqué. S'il a un display:none ($(this).hide()), il ne peut pas être mouseover'd et en tant que tel, il n'appellera pas l'événement non plus. Je pense que vous avez peut-être eu envie de le faire à la place:

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

Exemple: http://jsfiddle.net/niklasvh/9GPVu/8/

Si ce n'était pas ce que vous recherchez, le problème pourrait être dans votre balisage et la cause, il est cassé dans de nombreuses parties, comme aucune citation de fin pour a href, ou ul class.

Answer 3

Si vous voulez que les liens d'action pour apparaître lorsqu'un utilisateur passe sur le commentaire, alors je pense que cela est plus le long des lignes de ce que vous voulez:

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