Mousover父DIV更改子DIV背景

Question

我有一个包含其他三个小型DIV的父DIV。 当我将鼠标悬停或悬停在父DIV上时，我想更改三个子DIV的背景颜色。 是否可以在javascript或jquery中执行此操作？

<div id="r1">  //Mousover

<div class="bx"></div>  //Change background color
<div class="bx"></div>  //Change background color
<div class="bx"></div>  //Change background color

</div>

Answer 1

您不需要使用javascript进行此操作，只需使用CSS

div#r1:hover div.bx{ background-color: red; }

Answer 2

将此添加到您的javascript：

$('#r1').hover(function(){ $(this).addClass('r1hovered'); });

并将其添加到您的CSS中：

.r1hovered .bx { background-color: red; }

资料来源： http : //api.jquery.com/hover/

Answer 3

您也可以在CSS中执行此操作，

但是据我了解，您想要执行的操作是通过JQuery实现的：

<div id="r1" onmouseover='changeBg(this);' onmouseout='revertBg(this);'>  //Mousover

    <div class="bx"></div>  //Change background color
    <div class="bx"></div>  //Change background color
    <div class="bx"></div>  //Change background color

</div>

<script type='text/javascript'>
    function changeBg(div){
       $(div).children('.bx').attr('background-color', '#AAAAAA');
    }
    function revertBg(div){
       $(div).children('.bx').attr('background-color', '#BBBBBB');
    }    <script>