javascript - When hovering parent div, change bg color of child divs - Stack Overflow

admin管理员组

文章数量:1353150

I have the following setup:

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

I'm trying to change all the background color of all of them at the same time, when the mouse is hovering over any one of them. I tried:

<script type="text/javascript">
 $(function() {
    $('.parent').hover( function(){
       $(this).css('background-color', 'gray');
    },
     function(){
      $(this).css('background-color', 'red');
    });
 });
 </script>

But, the color is not "showing through" the children <div>s.

Is there a way to choose the descendents of "this". I have many of these sets in a row, so I think I need to use "this" so I don't have the call each parent by id. I'm thinking something like this:

<script type="text/javascript">
 $(function() {
    $('.parent').hover( function(){
       $(this "div").css('background-color', 'gray');
    },
     function(){
      $(this "div").css('background-color', 'red');
    });
 });
 </script>

But, can't quite get it to work - all the examples on jquery use the id selector... none use "this".

Thanks a lot!

I have the following setup:

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

I'm trying to change all the background color of all of them at the same time, when the mouse is hovering over any one of them. I tried:

<script type="text/javascript">
 $(function() {
    $('.parent').hover( function(){
       $(this).css('background-color', 'gray');
    },
     function(){
      $(this).css('background-color', 'red');
    });
 });
 </script>

But, the color is not "showing through" the children <div>s.

Is there a way to choose the descendents of "this". I have many of these sets in a row, so I think I need to use "this" so I don't have the call each parent by id. I'm thinking something like this:

<script type="text/javascript">
 $(function() {
    $('.parent').hover( function(){
       $(this "div").css('background-color', 'gray');
    },
     function(){
      $(this "div").css('background-color', 'red');
    });
 });
 </script>

But, can't quite get it to work - all the examples on jquery. use the id selector... none use "this".

Thanks a lot!

• javascript
• jquery
• html
• css
• this

Share Improve this question Follow asked Feb 27, 2011 at 19:55 Andrew SamuelsenAndrew Samuelsen 5,43299 gold badges4949 silver badges6969 bronze badges 1

• Perhaps this is what you're looking for: api.jquery./children. – pimvdb Commented Feb 27, 2011 at 19:59

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

If you're not targeting IE6, no need to use JavaScript, pure CSS will do the trick:

.parent, .child {
    background-color:red;
}

.parent:hover, .parent:hover .child {
    background-color:gray;
}

have you already tried .children()?

jQuery API

you can use .find()

$(this).find('div').css('background-color','red');

http://api.jquery./children/

try this:

 $(function() {
    $('.parent').hover( function(){
       $(this).children("div").css('background-color', 'gray');
    },
     function(){
       $(this).children("div").css('background-color', 'red');
    });
 });

demo: http://jsfiddle/zt9M6/

You're using $() with mixed arguments - it's either got to be a string as a selector (div), or just a DOM element (this). To select all divs within the context of this, try calling it like this:

<script type="text/javascript">
 $(function() {
    $('.parent').hover( function(){
       $("div", this).css('background-color', 'gray');
    },
     function(){
      $("div", this).css('background-color', 'red');
    });
 });
 </script>

From http://api.jquery./jQuery/#jQuery1

Do it with CSS classes

.parent .child{
    background-color: red;
}

.hoverstyle .child{
    background-color: gray;
}

$(.parent')hover(function() {
    $(this).addClass("hoverstyle"):
},
function(){
    $(this).removeClass("hoverstyle");
});

本文标签： javascriptWhen hovering parent divchange bg color of child divsStack Overflow