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>

鼠标在父DIV上更改子DIV背景

3 个答案: