將鼠標懸停在div的嵌套項目

在JQUERY中，我試圖創建一個簡單的覆蓋圖，當您在懸停上content1它消失並且content2出現。然後你鼠標移出的content2和content1重新出現。將鼠標懸停在div的嵌套項目

這工作得很好，除了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"); 
    }); 

});

來源

2012-04-24 Anicho

嘗試用鼠標離開，而不是鼠標移開試驗。 – 2012-04-24 13:33:53

使用mouseleave event而不是mouseout事件。

來源

2012-04-24 13:32:52 Guffa

你的我的英雄！謝謝 – Anicho 2012-04-24 13:34:19

使用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; 
}

來源

2012-04-24 13:35:06 iambriansreed

有效點我可以這樣做，但我有幾個相互鏈接的組件。 – Anicho 2012-04-24 13:36:02

將鼠標懸停在div的嵌套項目

回答

相關問題