CODEWITHSUNDEEP
jquery
RjAy Ermitz Cortel
RjAy Ermitz Cortel

Reputation: 49

How to select a child in jquery?

This is the sample structure!

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

Can anyone help me how to apply jquery effects on the div1-sub-child when i hover the div1?

Upvotes: 1

Views: 98

Answers (6)

Ravindra Shekhawat
Ravindra Shekhawat

Reputation: 116

This is very often when you are working with jquery and php .And there are lot's of way to do that here i am going to add one of them.Hope this may help you .

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

Upvotes: 0

Ashwin
Ashwin

Reputation: 12411

You do not jquery to do this. Using just css you get it working. As below -

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

Using 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
})

Upvotes: 1

palaѕн
palaѕн

Reputation: 73906

To add a special style to div, try:

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

Upvotes: 0

alemangui
alemangui

Reputation: 3655

Maybe something like 

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

Upvotes: 0

bipen
bipen

Reputation: 36531

using 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
  })

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

Try

$("#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 has two callbacks one will fire when you hover and second fire when hoverOut.

Upvotes: 1

Related Questions