1

他の 3 つの小さな DIV を含む親 DIV があります。親DIVにカーソルを合わせるかマウスオーバーすると、3つの子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>
4

3 に答える 3

6

JavaScript でこれを行う必要はありません。CSS を使用できます。

div#r1:hover div.bx{ background-color: red; }
于 2012-04-11T14:23:58.777 に答える
0

これをJavaScriptに追加します。

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

そしてそれをCSSに追加します。

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

ソース：http ：//api.jquery.com/hover/

于 2012-04-11T14:27:44.343 に答える
0

これは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-11T14:33:03.903 に答える