Question

我是jQuery的新手，但我很难得到我想要的东西。我希望我的<div>和<li>内的元素包含动画或做我传递的内容。
虽然我已经取得了一些成功，但如果我有10个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>

Answer 1

...

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

...

您只能在此对象下触发事件。

用户jQuery hover()而不是on(mouseenter)和on(mouseleave)

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

Answer 2

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

查看此示例以获取演示。

.children() Example

以下是Jquery API documentation

尝试类似

的内容

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

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

});

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

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

});

这是JS小提琴，供您理解 - http://jsfiddle.net/Pm2Tj/1/

希望有所帮助

Answer 3

尝试

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

如何在父元素的鼠标悬停上制作嵌套元素动画

3 个答案: