当子元素悬停时，如何切换元素的背景颜色？

Question

我想知道，你是如何（或者你可以）使用纯粹的css编码来改变元素的背景颜色。我的意思是，当你有这样的CSS时：

body{
    background-color:grey;
}
.button{
    color:blue;
}

然后你有：

.button:hover{
    color:yellow;
}

我的问题是，当您将鼠标悬停在具有班级.button的元素上时，是否可以使身体背景颜色发生变化？

Answer 1

CSS不处理元素与其父元素之间的关系/交互。这可能需要Javascript。这是一个jQuery示例：

$(document).ready(function(){
    $(".button").hover(function(){
        $("body").css("background-color", "newcolor");
    }
}

没有jQuery的另一个尝试：

function onButtonHover(){
    document.body.style.background = color;
}

您需要将此函数绑定到每个onMouseHover元素上的.button事件（或查看JoshC的小提琴：http://jsfiddle.net/5a9TS/）：

<button class="button" onMouseOver="onButtonHover()">MyButton</button>

有关此活动的更多信息：http://www.w3schools.com/tags/ev_onmouseover.asp。请注意，可以做的相反的交互是CSS（父对子关系）：

body:hover .button{
    background-color: newColor;
}