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

Question

我正在尝试更改整个页面的body背景颜色,当用户将鼠标悬停在该页面上的缩略图上时(缩略图位于div内部body).有没有办法只用CSS？

Answer 1

答:没有.

你必须上去,选择div父母,然后选择div父母......直到你到达body.没有办法只使用CSS选择元素的父级(如果你想知道为什么,这篇文章可能证明是有用的)......但是(CSS4中会有一个父选择器).

如果你想这样做,JavaScript就是你要走的路,这很简单.

如果您有这样的事情:

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

在您的HTML中,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/