1

私は Web デザインの割り当てに取り組んでおり、これまでのところほとんどの CSS スタイルにかなり慣れていません。このタスクには div 内の 3 つのカラー ボックスが含まれます。ボックスがホバーされたときに、この div の白い背景をボックスと同じ色に変える必要があります。

HTML:

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

ばかげた質問をする「あの男」になろうとしているわけではありません..しかし、私は文字通りこれにアプローチする方法がわかりません. ヒントをお寄せいただきありがとうございます。

4

3 に答える 3

1

これが実際の例です。これはあなたが望んでいたものですか>> http://jsfiddle.net/mbTBu/

$(document).ready(function(){
  $(".t1_colors").hover(function(){
    var $c=$(this).css("background-color");
        $("#task1").css('background-color', $c);
  });
});

mouseover&mouseout関数を使用して色を元に戻す こともできます。http://jsfiddle.net/mbTBu/2/

于 2013-10-28T23:33:16.043 に答える
1

Jeremy は、外側の div id="task1" がホバーされた内側の div の色を想定する必要があることを意味していると思うので、解決策は JavaScript を使用することです。

$('.t1_colors').hover(function(){
   $('#task1').css('background-color', $(this).css('background-color'));
},
 function(){
   $('#task1').css('background-color', white);
 }
);
于 2013-10-28T23:34:04.647 に答える
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:43:51.897 に答える