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来做到这一点？我想尽可能地钻取，以使其高效，但我不确定如何做到这一点。

如果我鼠标移到该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 
    } 
); 
});

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中绑定鼠标悬停事件

相关推荐