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

Question

我正在尝试更改整个页面的body背景颜色，当用户将鼠标悬停在该页面上的缩略图上时（缩略图位于divinside 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/

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。