JQuery навести курсор на дочерние элементы делает причудливые эффекты - PullRequest
Новая
       36

JQuery навести курсор на дочерние элементы делает причудливые эффекты

1 голос
/ 08 октября 2009

У меня есть эта разметка (упрощенно): 

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

Я подсвечиваю div при входе мыши и показываю (в противном случае скрытую) ссылку «мусор» (это как крошечный мусорный бак), чтобы пользователь мог удалить ссылку.

Я не могу использовать эффект 'hover', потому что мне нужно, чтобы они были live events. Так что я делаю мышку и мышеловку. Это код: 

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

(наведите курсор мыши на противоположное).

Анимация выглядит странно, но что я делаю не так?

Большое спасибо!

1 Ответ

13 голосов
/ 08 октября 2009

События mouseover и mouseout также запускаются, когда мышь входит и покидает любые дочерние элементы. Попробуйте вместо этого использовать события mouseenter и mouseleave.

К сожалению, метод live в настоящее время не поддерживает эти методы. При добавлении / удалении ссылок вам придется связывать их вручную. 

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);
});
...