Home > DeveloperSection > Forums > How to access this children div
Ashish Pandey

Total Post:128

Points:898
Posted on    June-15-2013 1:31 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 617  View(s)
Rate this:
Hi Expert,

I want to know how to use access this inside contents.

<div class="content">
    <div class="more">more</div>
</div>
<div class="content">
    <div class="more">more</div>
</div>
<div class="content">
    <div class="more">more</div>
</div>

CSS:

.content .more{
    background:#009474;
    display:block;
    width:70px;
    height:25px;
}
.content:hover{
    transition-property: background;
    transition-duration: 2s, 1s, 0.5s, 0.5s;
    background:#009474;
}

Jquery:

$(".content").hover(function(){
    $(".content .more").css("background-color", "#D0D0D0");
  },function(){
  $(".content .more").css("background-color","#009474");
});

My aim is on hover that content should change to #009474 color, and inside class "more" color to some other. With this code on hover all other class "more" are changing. So what can i do to have only inside class to change color on hover.
Is $(this '.more') right to use but I am getting no change with this.

Any help on above is really appreciated.


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    June-15-2013 3:54 AM

Hi Ashish,

you could try as following 

$(".content").hover(function(){
    $(this).find(".more").css("background-color", "#D0D0D0");
  }
);


Don't want to miss updates? Please click the below button!

Follow MindStick