1

私はこのマークアップを持っています（簡略化）：

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

マウスが入ったときに div を強調表示し、ユーザーがリンクを削除できるように (それ以外の場合は非表示の) 'ごみ箱' リンク (小さなごみ箱のようなもの) を表示します。

ライブイベントにする必要があるため、「ホバー」効果を使用できません。だから私はマウスオーバーとマウスアウトをやっています。これはコードです：

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

（マウスオーバーは正反対です）。

アニメーションは風変わりに見えますが、何が間違っていますか?

本当にありがとう！

4

1 に答える 1

13

およびイベントは、マウスが子要素に出入りするときにも発生しますmouseover。代わりにandイベントmouseoutを使用してみてください。mouseentermouseleave

残念ながら、ライブメソッドは現在これらのメソッドをサポートしていません。リンクを追加/削除するときは、手動でバインドする必要があります。

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);
});
于 2009-10-08T18:38:11.573 に答える