css - 仅使用 CSS 在悬停 div 时更改 body bgcolor

标签 css

我希望当我悬停一个元素(一个用 css 制作的盒子)时,主体的 background color 从一种颜色变为另一种颜色,例如白色变为红色。问题是这应该只使用 css 而不是 javascript 来完成。如果必须使用 javascript,则颜色应在鼠标移出时变回之前的颜色。

----------------编辑----------------

实际上我在尝试这个:

body{backgroung: #000;}
#div{some properties}
body #div:hover{background: #fff;}

最佳答案

纯 CSS 实验:

http://jsfiddle.net/Tymek/yrKRX/

HTML

<div id="trigger"></div>
<div id="bg"></div>​

CSS

body {
    height: 100%;
}

#bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    widht: 100%;
    height: 100%;
    z-index: 1;
    background: #EEE;
}

#trigger {
    position: absolute;
    width: 200px;
    height: 136px;
    top: 50%;
    left: 50%;
    margin: -68px 0 0 -100px;
    background: #333;
    z-index: 2;
}

/* KEY */
#trigger:hover ~ #bg {
    background: #EE0;
}​

关于css - 仅使用 CSS 在悬停 div 时更改 body bgcolor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14039723/

相关文章:

html - 对齐引导缩略图组件

javascript - 侧面菜单不会在移动设备上滚动

html - 浏览器滚动条移位

html - 简单的 HTML 和 CSS 问题 - 文本对齐不起作用?

javascript - 如何向前而不是向后添加文本

javascript - 睡在两次风格变化之间

html - 仅在具有相对属性的 div 中右对齐元素

css - Bootstrap 列内的响应图像高度

HTML 过渡图像和一个图形说明

java - 将 autoprefix-cli 添加到 ANT 构建