親要素は、私がmouseleave（）をやっていると思うと考えています

Question

これは明らかにそうではありません。

マイJS：

$(".job_charge.item-block").live({ 
    mouseenter: function(){ 
    $(this).find('.edit-and-delete').stop(true,true).fadeIn(); 
    }, 
    mouseleave: function(){ 
    $(this).find('.edit-and-delete').stop(true, true).fadeOut(); 
    } 
}); 

私のHTML：

<div id="job_charge_2244" class="item-block job_charge"> 
      <div class="edit-and-delete right"> 
      </div> 
</div> 

CSS：

.item-block.job_charge 
    border-bottom: 1px dotted #ccc 
    display: inline-block 
    padding-bottom: 15px 
    width: 650px 

    .edit-and-delete 
    position: relative 
    display: none 
    top: 25px 
    right: 5px 
    float: right 
    a 
     margin-right: 8px 

私はバナナを行ってきました。私の内側のdivのリンク上にマウスを置くと、すぐにマウスの離脱機能が起動され、それらは非表示になります。このdivは当然position: relativeですが、私はblockに入れましたが、それでも同じ問題があります。

親のdivはinline-blockです。

Answer 1

子要素がfloatに設定されている可能性があり、あなたは親が実際にあなたが期待するよりも小さけれにテストすることができます私のフィドルリンク。 floatを削除するか、overflow: autoを親に貼り付けてみてください。

Answer 2

これを代わりに試してみてください。基本的に同じですが、マウスセンターとマウス離しの組み合わせ機能である.hoverを使用しています。子供に入るときに親を離れてバグはありません。

$(".job_charge.item-block").hover(function(){ 
    $(this).children(".edit-and-delete").fadeIn(); 
}, function(){ 
    $(this).children(".edit-and-delete").fadeOut(); 
}); 

http://jsfiddle.net/YWRRZ/4/ < - あなたはそれ

Answer 3

mouseenterとmouseleaveイベントは、この状況を正しく処理するように特別に設計されています。子要素を入力すると、子要素が実際に親要素内にある場合は、親に対してトリガーされたイベントはありません。mouseleave

http://jsfiddle.net/baCsd/

私はあなたが実際に子要素を配置し、あなたのコード内で何かを持っていると思います：私はあなたのコードをしようとすると

、それは私が子要素を置くとmouseleaveイベントをトリガしません。の親要素の外側にあるので、mouseleaveイベントがトリガーされます。

たとえば、親要素にコンテンツがない場合は、高さを与えるパディングのみなので、15pxのみで、子要素は親要素の下に配置できます。