jQuery中綁定鼠標懸停事件

我的DOM的樣子：jQuery中綁定鼠標懸停事件

<body> <div class="c1"> 
       <div class="c2"> 
       ... 
       </div> 
       <div class="c3"> 
         <div class="thisone">....</div> 
       </div> 
     </div> 
     <div class="c1"> 
       <div class="c2"> 
       ... 
       </div> 
       <div class="c3"> 
         <div class="thisone">....</div> 
       </div> 
     </div> 
     <div class="c1"> 
       <div class="c2"> 
       ... 
       </div> 
       <div class="c3"> 
         <div class="thisone">....</div> 
       </div> 
     </div> 
     </body>

與類的div元素「thisone」目前處於隱藏狀態。

在類c1的鼠標懸停期間，我希望帶'thisone'的div可見，並在鼠標懸停期間隱藏。

我該如何使用jQuery來做到這一點？我想盡可能地鑽取，以使其高效，但我不確定如何做到這一點。

來源

2009-10-25 mrblah

如果我鼠標移到該DIV的「thisone」一個div應該可見？ – 2009-10-25 02:46:03

@詹姆斯布萊克 - 他從未回答過問題！ – jrhicks 2009-10-25 02:54:16

@jrhicks - 哇，這是相當奇蹟達到2.5K代表沒有回答任何問題= D – mauris 2009-10-25 03:02:24

最可靠，最簡單的方法：

$(window).ready(function(){ 
    $(".c1").hover(
    function(){ 
     // mouse in 
     $(this).children(".thisone").stop().fadeIn(); // you can change fadeIn to show 
    }, 
    function(){ 
     // mouse out 
     $(this).children(".thisone").stop().fadeOut(); // you can change fadeOut to hide 
    } 
); 
});

來源

2009-10-25 02:47:39 mauris

stop（）是什麼？ – jrhicks 2009-10-25 02:50:25

如果你真的很快試用它，你會知道stop（）有助於提高響應速度 - 這是因爲jQuery中的動畫是排隊的。您需要停止當前的動畫才能繼續下一步以提高響應速度。 – mauris 2009-10-25 02:52:06

停止當前正在發生的動畫。您可以在不使用它的情況下產生視覺工件或不正確的功能。 – cletus 2009-10-25 02:52:09

jQuery中綁定鼠標懸停事件

回答

相關問題