jquery - 如何在jquery中选择一个孩子？

Question

这是样本结构！

<div id ="div1">
    <div class="div1-child">
        <div class="div1-sub-child">
        </div>
    </div>
 </div>

当我悬停 div1 时，谁能帮助我如何在 div1-sub-child 上应用 jquery 效果？

Answer 1

你不需要 jquery 来做到这一点。只使用 css 就可以了。如下 -

#div1:hover .div1-sub-child {
   background-color:yellow
}

使用 jQuery -

$('#div1').hover({function(){  //this is called whn mouse enters the div
    $(this).find('.div1-sub-child').css('background-color','red'); //your effect here
},function(){   //this is called whn mouse leaves the div
    $(this).find('.div1-sub-child').css('background-color','green'); //your effect here
})

Answer 2

尝试

$("#div1").hover(
function()
{
    $(this).find('div.div1-sub-child').filter(':not(:animated)').animate(
    {
        marginLeft:'9px'
    },'slow');
},
function()
{
    $(this).find('div.div1-sub-child').animate(
    {
        marginLeft:'0px'
    },'slow');
});

Hover 有两种callbacks，一种是你时会开火，另一种是当你hover开火时hoverOut。

Answer 3

当您使用 jquery 和 php 时，这很常见。并且有很多方法可以做到这一点，我将添加其中一种。希望这可以帮助您。

$('#div1 .div1-child').children().addClass('addclass');

Answer 4

也许像

$(".div1-child").hover(
  function () {
    $(this).find('.div1-sub-child').css(*** your new css ***);
  });

Answer 5

使用 jQuery

 $('#div1').hover({function(){  //this is called whn mouse enters the div
        $(this).find('.div1-sub-child').css('background-color','red'); //your effect here
    },function(){   //this is called whn mouse leaves the div
        $(this).find('.div1-sub-child').css('background-color','green'); //your effect here
  })

Answer 6

要为 div 添加特殊样式，请尝试：

$("#div1").hover(
  function () {
    $(this).find('div.div1-sub-child').addClass("hover");
  },
  function () {
    $(this).find('div.div1-sub-child').removeClass("hover");
  }
);