Jquery 如何使嵌套元素在父元素的鼠标上方设置动画

我是jQuery新手，但我很难得到我想要的东西。我希望元素被包装在我的

和

中，以设置动画或做我传递给它的事情<虽然我取得了一些成功，但如果我有10个div，当鼠标移过一个div时，10个div内的所有标题都会消失。这可以通过

$（this）

完成，但就像我说的，我是新来的。下面是我的代码

    jQuery(document).ready(function($) {
    $(".products > ul > li").on('mouseenter',function(){
    //slide up h3 or div.cat-title
   $(this).closest(".products")
     .find(".cat-title")
     .fadeIn('slow');
     });
    $(".products > ul > li").on('mouseleave',function(){
    //slide down h3 (and hide)
  $(this).closest(".products")
    .find("h3")
    .fadeOut('slow');
    });

});

而我的html是

<div class="products">
 <ul class="products">
  <li class="product">
   <a href="#">
    <img width="180" height="190" alt="Beauty & Pampering" src="#">
     <h3>
      </a>
      <div class="cat-title">Beauty & Pampering</div>
   </li>
  </ul>
</div>

美容与娇惯

您是否尝试过使用.children（）

查看此示例以获取演示

这是你的电话号码

试试像这样的东西

$('ul.products').on('mouseenter', function(){

$('div.products').children('ul').css('background','green'); 

});

$('div.products').on('mouseleave', function(){

$('.products').children('div').css('background','yellow'); 

});

以下是JS小提琴，供您理解-

希望能有帮助

...

$('.products > ul > li').on('mouseenter',function(){
   $(".cat-title", this).fadeIn('slow');
});

...

只能在此对象下触发事件

用户jQuery

hover（）

而不是（mouseenter）上的

和（mouseleave）

试一试

---

由于所有相关元素都在

li

change

$（this）中。与
$（this）最接近（“.products”）
。最接近（.product”）

和tryalso您可以尝试在fiddle@ArunPJohny中重新创建问题吗？哦，太好了！当父元素事件被触发时，是否有一种简单的方法可以将嵌套元素作为目标并执行操作。谢谢，但请参阅我的。我不知道如何瞄准内在元素，就是这样！我从来都不知道你能及格。父母是个论据。很高兴我能帮上忙。这适用于有多个“父”类的情况。令人惊叹的！如果你能回答的话。我很乐意接受。顺便说一句，这叫什么样的行为？老实说，我不知道该怎么称呼它，我甚至不知道它是否被称为。如果您可以使用上面的代码创建一个工作的JSFIDLE（使用css等），我可以帮助您。我没有从您发布的代码中获得太多信息。[这里]（jsfiddle.net/FMLHu/5/）我想隐藏黑色div，并在每个div上的鼠标上显示它。

$('.products > ul > li').hover(function(){
   $(".cat-title", this).fadeIn('slow');
},function(){
   $(".cat-title", this).fadeOut('slow');
});

$(".products > ul > li").on('mouseleave', function () {
    //slide down h3 (and hide)
    $(this).closest(".product")
        .find("h3")
        .fadeOut('slow');
});