Mousover parent DIV改變孩子的DIV背景

我有一個包含其他三個小DIV的父DIV。當我將鼠標懸停在父DIV上時，我想更改三個子DIV的背景顏色。是否有可能在JavaScript或jQuery中做到這一點？Mousover parent DIV改變孩子的DIV背景

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

來源

2012-04-11 Erik

添給出了最好的答案 – kishu27 2012-04-11 14:30:40

您可以在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>

來源

2012-04-11 14:33:03 ShayanK

你不需要用JavaScript來做到這一點，你可以用CSS

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

來源

2012-04-11 14:23:58

添加到您的javascript：

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

，並添加到您的CSS：

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

來源：http://api.jquery.com/hover/

來源

2012-04-11 14:27:44 werfu

Mousover parent DIV改變孩子的DIV背景

回答

相關問題