jQuery를 가져가 내가이 마크 업 (간체)를 가지고

Question

기발한 효과를 만든다 (작은 휴지통과 같음) 사용자가 링크를 삭제할 수 있습니다.

이벤트가 필요하므로 '호버'효과를 사용할 수 없습니다. 그래서 마우스 오버와 마우스 아웃을하고 있습니다. 이것은 코드입니다.

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

(마우스 오버는 정확히 반대입니다.)

애니메이션이 이상하게 보입니다. 내가 뭘 잘못하고 있습니까?

감사합니다.

Answer 1

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