css中子悬停时更改父div的背景颜色？答案

【问题标题】：Change background colour of parent div upon child hover in css?css中子悬停时更改父div的背景颜色？
【发布时间】：2013-11-07 22:32:52
【问题描述】：

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

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

【问题讨论】：

所以当你将鼠标悬停在一个孩子上时，你想改变父母的盒子颜色吗？我不认为你可以用 CSS 来做到这一点......但是。您可能必须使用 javascript
是的，这正是我想要做的。而是div本身的背景而不是标题。谢谢！
如果您不确定您是网页设计的新手，给出的答案使用了 jQuery 库
我会检查的。非常感谢，这真的很有帮助。

标签： javascript css colors hover

【解决方案1】：

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

【讨论】：

【解决方案2】：

这是工作示例，这是您想要的吗>>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/

【讨论】：

【解决方案3】：

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

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

【讨论】：