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

【问题标题】：Change background colour of parent div on child hover in javascript?在javascript中更改子悬停时父div的背景颜色？
【发布时间】：2013-11-08 00:49:38
【问题描述】：

我在div 中有三个彩色框，所有颜色都不同，当我 hover 在其中任何一个框上时，我必须使父 div 的 background-color 出现与悬停在上面的内盒。

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，如果这样可以让任何事情变得更容易的话。提前感谢您的任何反馈，我们将不胜感激。

【问题讨论】：

标签： javascript html css colors hover

【解决方案1】：

查看纯 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 属性名称。

【讨论】：

语法和拼写错误 - bakground 应为 background 并需要结束 "

【解决方案2】：

var parent = document.getElementById("task1");//get parent element

var item1 = document.getElementById("t1_color_one");//get child element

item1.addEventListener("mouseover", func, false);//add event listener for first item on mouseover and call func when someone mouse overs it

function func()
{  
  parent.setAttribute("style", item1.getAttribute("style"));//set the style attribute of the parent to the style attribute of the child
}

然后你可以为其他人做类似的事情。

【讨论】：

【解决方案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 link 中查看它。

【讨论】：

【解决方案4】：

使用以下代码：

<html>
    <head>
        <style>
            .t1_colors {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 20px;
            border: 1px solid rgb(111,61,69);
            }
        </style>
    </head>
    <body>
        <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;">ugy</div>
            <div id="t1_color_two" class="t1_colors" style="background: lightgreen;">hjk</div>
            <div id="t1_color_three" class="t1_colors" style="background: palevioletred;">jkk</div>
        </div>
    </body>
    <script>
        try
        {
            function change_bgcolor(elem)
            {
                elem.addEventListener('mouseover', function(){elem.parentNode.style.backgroundColor=elem.style.backgroundColor}, false);
            }

            function f1()
            {
                div_arr=document.getElementsByTagName('div');
                for(x in div_arr)
                {
                    if(div_arr[x].parentNode.tagName=="DIV")
                    {
                        change_bgcolor(div_arr[x]);
                    }
                }
            }
        }
        catch(e)
        {alert(e);}
        onload=f1();
    </script>
</html>

Fiddle在这里

【讨论】：