9

是否可以在button点击时更改背景颜色；整个document，只使用 CSS 和 HTML5？

（例如：它在 JavaScript 中是微不足道的）

4

6 回答 6

8

根据我在评论中发布的小提琴，我对其进行了非常轻微的修改以使用 Bootstrap 按钮 CSS。

只需包含 Bootstrap 的 CSS 文件，然后使用下面的代码。

HTML

<label for="check" class="btn btn-default">Toggle background colour</label>
<input type="checkbox" id="check" />
<div></div>

CSS

div {
    width: 100%;
    height: 100%;
    background: #5CB85C;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
label.btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2; 
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"]:checked + div{
    background: #5BC0DE;
}

这使用了相邻的兄弟选择器。

它在这里工作： http: //jsfiddle.net/eYgdm/（我添加*-user-select: none;以防止选择标签文本，但标签不需要它）

浏览器支持

Chrome、Firefox [Desktop & Mobile] (Gecko) ≥ 1.0、Internet Explorer ≥ 7、Opera ≥ 9 和 Safari ≥ 3 参考：属性选择器和相邻兄弟选择器

于 2013-10-10T13:28:55.953 回答
3

你可以这样做——使用相邻的 css 选择器：

<button class="btn">button</button>
<div class="content"></div>

btn:active + .content{
    background: blue;
}

http://jsfiddle.net/JeffreyTaylor/g47Uh/

于 2013-10-09T00:01:14.270 回答
1

不， CSS 中没有“点击然后做某事”的概念。

于 2013-10-08T23:48:05.757 回答
0

您可以（ab？）使用 :target 选择器。这可能不适用于较旧的浏览器。这是我制作的一个超级简单的示例，它在单击链接时切换背景。

这个概念是将 CSS 样式应用于目标元素。在下面的代码中，单击链接将定位到 body 的 ID，这将应用 body:target 中的样式（更改背景颜色）。

<html>
    <head>
        <style>
            body { background-color:#333; }
            body:target { background-color:#fff; }
        </style>
    </head>
    <body id="myBody">
        <a href="#myBody">Click</a>
    </body>
</html>

JSfiddle

于 2013-10-10T14:48:10.027 回答
0

有一种方法可以做到：

.cc2:focus {
background-color: #19A3FF;}

:focus 基本上意味着当您单击具有 cc2 类的元素时，它会将其背景变为蓝色 :) 希望对您有所帮助。

于 2014-08-17T17:41:18.337 回答
0

不幸的是，css 规则中没有回溯；对于 CSS 选择器，没有办法爬上元素的祖先。

于 2013-10-09T00:04:01.897 回答