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

【问题标题】：How can I change a div's background, by hovering over another div?如何通过将鼠标悬停在另一个 div 上来更改 div 的背景？
【发布时间】：2012-07-20 18:00:00
【问题描述】：

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

【问题讨论】：

stackoverflow.com/questions/8114657/…

标签： css background background-image background-color

【解决方案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/

【讨论】：

我发现最好将它添加到页面底部和 $(document).ready(function(){...});

【解决方案2】：

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

【讨论】：

【解决方案3】：

这是不可能的。用 JS 就行了，例如：

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

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

【讨论】：