javascript - 子悬停在css中时更改父div的背景颜色？

Question

我正在做一个网页设计任务，到目前为止我对大多数 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>

不要试图成为提出愚蠢问题的“那个人”..但我真的不知道如何解决这个问题。感谢您的任何提示，非常感谢

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

Answer 2

我认为 Jeremy 意味着外部 div id="task1" 必须假设悬停在内部 div 的颜色，所以解决方案是使用 javascript：

$('.t1_colors').hover(function(){
   $('#task1').css('background-color', $(this).css('background-color'));
},
 function(){
   $('#task1').css('background-color', white);
 }
);

Answer 3

这是纯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链接中查看它。