javascript 在javascript中的子悬停时更改父div的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19648504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change background colour of parent div on child hover in javascript?
提问by Jeremy Stone
I have three coloured boxes in a div, all of different colors, and when i hoverupon any of these boxes i have to make the background-colorof the parent divappear with the same color as the inner-box which is being hovered upon.
我在 a 中有三个彩色框div，所有颜色都不同，当我hover在这些框中的任何一个上时，我必须使background-color父div框的颜色与悬停在其上的内框的颜色相同。
CSS:
CSS：
.t1_colors {
float: left;
width: 100px;
height: 100px;
margin-right: 20px;
border: 1px solid rgb(111,61,69);
}
HTML:
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>
Our class is using addEventListenerif that makes anything any easier. Thanks in advance for any feedback, and will be greatly appreciated.
我们的班级正在使用addEventListener如果这让任何事情变得更容易。在此先感谢您的任何反馈，我们将不胜感激。
回答by Federico Piragua
Look in pure JavaScript:
在纯 JavaScript 中查看：
<div>
<div id="child" onMouseOver="this.parentNode.style.background='red'">Hover Me</div>
</div>
With jQuery:
使用 jQuery：
$("#child").hover(function(){
$(this).parent().css("background","red");
});
UPDATE: not Click, it's Hover. Fixed css property name.
更新：不是点击，而是悬停。固定的 css 属性名称。
回答by Gabriel Sadaka
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
}
and then you can do something similar for the rest of them.
然后你可以为其他人做类似的事情。
回答by Khamidulla
Here is answer in pure javascript
这是纯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);
And you can check it in jsFiddle link.
您可以在 jsFiddle链接中查看它。
回答by Rajesh Paul
Use the following code:
使用以下代码：
<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>
Fiddlehere
在这里摆弄
