javascript - 悬停父div时，更改子div的背景色

Question

我有以下设置:

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

当鼠标悬停在其中任何一个上时，我试图同时更改所有这些的所有背景颜色。我试过:

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

但是，颜色并没有“透过” children 看出来<div>秒。

有没有办法选择“this”的后代。我连续有很多这样的集合，所以我想我需要使用“this”，所以我没有通过 id 调用每个父项。我在想这样的事情:

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

但是，不能让它正常工作——jquery.com 上的所有示例都使用 id 选择器……没有一个使用“this”。

非常感谢!

Answer 1

如果您的目标不是 IE6，则无需使用 JavaScript，纯 CSS 即可:

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

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