divのネストされたアイテムの上にマウスを置いて

Question

JQUERYで単純なオーバーレイを作成しようとしています。がホバーにホバーするとcontent1が消え、content2が表示されます。次に、マウスアウトのcontent2とcontent1が再表示されます。

content2がannoyingdivオーバーannoyingdivときにマウスが移動しマウスアウトイベントトリガを持っている以外これが正常に動作します。これを回避するにはどうしたらいいですか？それともこの解決方法は？

HTML

<div class="content1">blah blah</div> 

<div class="content2"> 
    <div class="annoyingdiv"> 
     blah blah 
    </div> 
</div> 

のjQueryはJavaScript

$(function() { 

    $('.content1').hover(function() { 

     $(".content2").css("display", "block"); 
     $(this).css("display", "none"); 

    }); 

    $('.content2').mouseout(function() { 

     $(".content1").css("display", "block"); 
     $(this).css("display", "none"); 
    }); 

}); 

Answer 1

代わりmouseoutイベントのmouseleave eventを使用してください。

Answer 2

CSSを使用してください。

証明：http://jsfiddle.net/iambriansreed/vaQTU/

HTML：

<div class="parent"> 
    <div class="content1">blah blah content1</div> 

    <div class="content2"> 
     <div class="annoyingdiv"> 
      blah blah annoyingdiv 
     </div> 
    </div> 
</div> 

はCSS：

.parent .content2 { 
    display: none; 
} 
.parent:hover .content1 { 
    display: none; 
} 
.parent:hover .content2 { 
    display: block; 
}​​​