在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 链接中进行检查。