Question

我正在尝试按此处显示的按钮http://jsfiddle.net/9epgs999/代码

button:active{
background-color:yellow;
}

在：活动状态下，按钮将其背景颜色从绿色变为黄色。我想要做的是将背景颜色更改为蓝色，当它处于：第二次激活状态（第二次点击）和第三次点击其他颜色是否有办法使用仅css

Answer 1

这是我的想法。正如你所看到的那样，它非常冗长，但你可以在技术上使它只使用CSS：

HTML：

<div class="btn-wrap">
    <input type="checkbox" class="check yellow" />
    <input type="checkbox" class="check blue" />
    <input type="checkbox" class="check red" />
    <button>Button</button>
</div>

CSS：

.btn-wrap {
    position: relative;
    display: inline-block;
}
.btn-wrap .check {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.btn-wrap .check:checked {
    z-index: -1;
}

.btn-wrap button {
    width:100px;
    height:50px;
    background-color:green;
}

.btn-wrap .red:active ~ button {
    background-color: white;
}
.btn-wrap .red:checked ~ button:active {
    background-color: red;
}

.btn-wrap .blue:active ~ button {
    background-color: red;
}
.btn-wrap .blue:checked ~ button:active {
    background-color: blue;
}

.btn-wrap .yellow:active ~ button {
    background-color: blue;
}
.btn-wrap .yellow:checked ~ button:active {
    background-color: yellow;
}

演示：http://jsfiddle.net/9epgs999/3/

这个想法非常简单。如何在CSS中存储状态的选项并不多。其中一个是使用checkboxe的:checked伪类与兄弟选择器。

即使它可以在CSS中完成，但我最好只使用几行javascript代码。

更改：每次单击时的活动样式

1 个答案:

演示：http://jsfiddle.net/9epgs999/3/