Question

我的DOM看起来像：

<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>

目前隐藏了具有“thisone”类的div元素。

在c1类的鼠标悬停期间，我希望带有'thisone'的div可见，并在mouseout期间隐藏。

如何使用jQuery执行此操作？我想尽可能地向下钻取以使其高效，但我不确定如何做到这一点。

Answer 1

最简单，最简单的方法：

$(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
     }
  );
});

在jquery中将鼠标绑定到事件上

1 个答案: