在悬停div时更改body bgcolor，仅使用CSS [英] Change body bgcolor on hovering a div, using CSS only

问题描述

我希望当我悬停元素（使用css制作的框）时，主体的背景颜色从一种颜色更改为另一种颜色，例如白色到红色。问题是，这应该使用仅css和没有javascript。如果必须使用javascript，那么颜色应该在鼠标出现时变回上一个。

----------- ---- EDIT ---------------

其实我在尝试这个：

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

解决方案

纯CSS实验：

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

HTML

; / div>
< div id =bg>< / div>

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

I want that when I hover an element(a box made with css), the background color of the body changes from one color to another, for example white to red. The problem is that this should be done using css only and no javascript. And if javascript has to be neccesarily be used, then the color should change back to the previous one on mouse out.

---------------EDIT---------------

Actually I was trying this:

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

解决方案

Pure CSS experiment:

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

这篇关于在悬停div时更改body bgcolor，仅使用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！