Question

我正在尝试使用CSS创建一个'灯光开关'来切换页面的颜色。我使用Joe对这个问题的出色回答我做了一个糟糕的开始：Change background on button click, using CSS only?

是否可以定位整个页面而不是div中的内容？另外：我可以做更多的事情来将按钮伪装成链接吗？

HTML：

<label for="check" class="lights">Click here to invert colours</label>
<input type="checkbox" id="check" />
<div>This works...</br>
<a href="http://www.google.com">but how about links (and the button itself)...</a>
</div>
<p>and how about the full page (without containing everything in a div)?</p>

CSS：

body, a {
    color: #000
}
div {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + div {
    background: #000;
    color: #fff;
}

感谢您的关注 - 道歉，我真的很天真。

Answer 1

嘿，你必须改变你的css：

 input[type="checkbox"]:checked + label +div,
input[type="checkbox"]:checked + label +div>a
,input[type="checkbox"]:checked+label {
    background: #000;
    color: #fff;
}

这样的HTML：

<input type="checkbox" id="check" />
<label for="check" class="lights">Click here to invert colours</label>
<div>This works...<br>
<a href="http://www.google.com">but how about links (and the button itself)...</a>
</div>
<p>and how about the full page (without containing everything in a div)?</p>

Answer 2

您可以将<div>设为position:absolute页面，然后设置z - index:-1;，使其符合您的正常内容。

＆＃13;

body, a {
    color: #666;
}
div {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + div {
    background: #000;
    color: #fff;
}
/*added code below*/
body {
    margin: 0;
}
div {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    top: 0;
}

＆＃13;

<label for="check" class="lights">Click here to invert colours</label>
<input type="checkbox" id="check" />
<div></div>

＆＃13;

使用CSS切换整页文本和背景颜色的'light swtch'

2 个答案: