0

に 3 つの色付きのボックスがありdiv、すべて異なる色です。hoverこれらのボックスのいずれかをオンにすると、ホバリングされている内部ボックスと同じ色でbackground-color親を表示する必要があります。div

CSS:

 .t1_colors {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    border: 1px solid rgb(111,61,69);
    }

HTML:

<div id="task1" class="task">
    <h2>Task 1</h2>
    <p>Change the background color, of the div that     contains this task, to the color in each box when the box is hovered over.</p>
    <p>When the mouse stops hovering over the box, change the background color back to white.</p>
    <div id="t1_color_one" class="t1_colors" style="background: goldenrod;"></div>
    <div id="t1_color_two" class="t1_colors" style="background: lightgreen;"></div>
    <div id="t1_color_three" class="t1_colors" style="background: palevioletred;"</div>
</div>

私たちのクラスはaddEventListener、それが何かを簡単にする場合に使用しています。フィードバックをお寄せいただきありがとうございます。

4

4 に答える 4

6

純粋な JavaScript を見てください:

<div>
  <div id="child" onMouseOver="this.parentNode.style.background='red'">Hover Me</div>
</div>

jQuery の場合:

 $("#child").hover(function(){
     $(this).parent().css("background","red");
 });

更新: クリックではなく、ホバーです。css プロパティ名を修正しました。

于 2013-10-29T02:23:07.537 に答える
0

ここに純粋なjavascriptでの答えがあります

window.addEventListener('load', function(event)
{
    var divs = document.getElementsByClassName('t1_colors');
    var count_of_divs = divs.length;

    for(var i = 0; i<count_of_divs; i++)
    {
        divs[i].addEventListener('mouseover', function(e)
        {
            document.getElementById('task1').setAttribute('style', e.target.getAttribute('style'));
        }, false);

        divs[i].addEventListener('mouseout', function(e)
        {
            document.getElementById('task1').removeAttribute('style');
        }, false)
    }
}, false);

そして、jsFiddleリンクで確認できます。

于 2013-10-29T03:05:47.613 に答える