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