jQuery hover über untergeordnete Elemente macht skurrile Effekte

Habe ich dieses markup (vereinfacht):

<div class='item'>
  <a> one link </a>
  <a class='trash'><img src='trash.png'/></a>
</div>

Ich bin Hervorhebung der div, wenn die Maus betritt, und zeigt, dass die (sonst verborgenen) "trash" - link (es ist wie eine kleine Mülltonne), so kann der Benutzer den link löschen.

Kann ich nicht 'hover' - Effekt, denn ich brauche Sie live Veranstaltungen. Also mache ich mouseover und mouseout. Dies ist der code:

$('div.link').live('mouseout', function(e){
        console.log(e)
        if(e.target == this){
            $(this).removeClass('hover');
            $(this).children('a.trash').fadeOut();
        }
    });

(mouse over macht die x-acto Gegenteil).

Die animation sieht schrulligen obwohl, was mache ich falsch?

Vielen Dank!

  • definieren Sie "schrulligen"
InformationsquelleAutor Pablo Fernandez | 2009-10-08
  1. 13

    Den mouseover und mouseout Ereignisse werden auch ausgelöst, wenn die Maus betritt und verläßt child-Elemente. Versuchen Sie es mit der mouseenter und mouseleave Veranstaltungen statt.

    Leider die live Methode derzeit nicht unterstützt diese Methoden. Sie haben, um Sie zu binden manuell beim hinzufügen/entfernen von Verknüpfungen.

    function toggleDelete() {
      $(this)[($(this).hasClass('hover') ? 'remove' : 'add') + 'Class']('hover');
      $(this).find('a.trash').toggle();
}

$('div.link').bind('mouseenter, mouseleave', toggleDelete);

$('.add').click(function(e) {
    var link = $('<a />').addClass('link');
    link.bind('mouseenter, mouseleave', toggleDelete);
    $('.parent').append(link);
});
    InformationsquelleAutor bendewey
Schreibe einen Kommentar