悬停父 div 时，更改子 div 的 bg 颜色答案

【问题标题】：When hovering parent div, change bg color of child divs悬停父 div 时，更改子 div 的 bg 颜色
【发布时间】：2011-02-27 19:55:38
【问题描述】：

我有以下设置：

<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>

但是，颜色并没有“显示”孩子<div>s。

有没有办法选择“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”。

非常感谢！

【问题讨论】：

也许这就是你要找的东西：api.jquery.com/children.

标签： javascript jquery html css this

【解决方案1】：

如果您不是针对 IE6，则无需使用 JavaScript，纯 CSS 即可：

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

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

【讨论】：

【解决方案2】：

您是否已经尝试过 .children()？

jQuery API

【讨论】：

【解决方案3】：

你可以使用.find()

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

http://api.jquery.com/children/

【讨论】：

【解决方案4】：

试试这个：

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

演示： http://jsfiddle.net/zt9M6/

【讨论】：

【解决方案5】：

您正在使用带有混合参数的$() - 它必须是作为选择器的字符串 (div)，或者只是一个 DOM 元素 (this)。要选择this 上下文中的所有divs，请尝试这样调用它：

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

来自http://api.jquery.com/jQuery/#jQuery1

【讨论】：

【解决方案6】：

用 CSS 类来做

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

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

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

【讨论】：