如何通过悬停在另一个div上来更改div的背景？

当用户将鼠标悬停在该页面上的缩略图上时（缩略图位于内body），我试图更改整个页面的body的背景颜色。有没有办法只使用CSS？如何通过悬停在另一个div上来更改div的背景？

2012-07-21 John Doe

http://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element – 2012-07-21 23:44:24

答案：否。

你必须去，选择div的父母，然后选择div的父母......直到你到达body。没有办法只用CSS选择一个元素的父元素（如果你想知道为什么，this article可能会证明是有用的）......但是（在CSS4中会有一个父元素选择器）。

JavaScript是要走的路，如果你想做到这一点，这很容易。

如果你有这样的事情：在你的HTML

<div class='change-bg'></div>

，那么JavaScript是简单的：

var el = document.querySelector('.change-bg'); 
el.addEventListener('mouseover', function(){ 
    document.body.style.backgroundColor = 'red'; 
}, true); 
el.addEventListener('mouseout', function(){ 
    document.body.style.backgroundColor = 'black'; 
}, true);

演示：http://jsfiddle.net/thebabydino/TDSUL/

如果你使用jQuery，它变得更简单：

$('.change-bg').hover(function(){ 
    $('body').css({'background': 'red'})}, 
function(){ 
    $('body').css({'background': 'black'}) 
});

演示：http://jsfiddle.net/thebabydino/YWDeA/

来源

2012-07-21 23:34:09 Ana

我找到最好将它添加到页面底部和$（document）.ready（function（）{...}）中; – ImaginedDesign 2013-04-11 15:02:11

不这样，没有。你可以通过CSS选择器改变后代的属性，但不能改变祖先的属性。 XPath会允许这样的事情，但这在CSS中是不可能的。所以我想你在这种情况下需要使用JavaScript。它不可能。

来源

2012-07-21 23:34:32 Joey

它是不可能的。只是JS去，像例如：

<div data-bgcolor="red"><div>  

$("div").mouseover(function(){ 
    $("body").css("background-color", $(this).attr("data-bgcolor")); 
})

来源

2012-07-21 23:36:13

如何通过悬停在另一个div上来更改div的背景？

回答

相关问题