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

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;
}

不过，您需要将此函数绑定(bind)到每个 .button 元素上的 onMouseHover 事件(或参见 JoshC 的 fiddle :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;
}