Question

当用户将鼠标悬停在该页面上的缩略图上时，我正在尝试更改整页的body背景色（缩略图位于div内的body）。有没有办法只用CSS？

Answer 1

答案：不。

你必须上去，选择div的父母，然后选择div的父母......直到你到达body。没有办法只使用CSS选择一个元素的父元素（如果你想知道为什么，this article可能有用）......（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/

Answer 2

不可能。只需使用JS，例如：

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

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

Answer 3

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

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

3 个答案: