所以很简单,
我想为一堆子菜单项使用一些css动画类,并想知道我是否可以使用css以某种方式允许点击激活状态和停用状态。这样我就可以在我的菜单项中使用一些有趣的类。
这是一个href标签的例子,指向下面发布的div id概述。我在一定程度上使用jquery,但如果可能的话,我想为菜单项做一些纯css。
<a class='slide' href='#' data-url='who-are.html' data-target='mission'>
<span class='element'>Mission and Values</span>
</a>
<div id ="overview" class="animated bounceInUp">some content</div>
因此,点击href,弹出div类…我想为它添加一个类,如果点击了不同的菜单项
基本上是一样的。
HTML:
<input type="checkbox" id="status" />
<label for="status" class="button">
<button>Button</button>
</label>
CSS:
#status {
display: none;
}
label {
background-color: magenta;
display: inline-block;
}
.button > button {
pointer-events: none;
padding: 8px;
-webkit-user-select: none;
user-select: none;
}
#status:not(:checked) ~ .button > button {
background-color: red;
}
#status:checked ~ .button > button {
background-color: green;
}
JSFiddle
答案真的很简单…
简单地使用CSS焦点来允许一个按钮的两种状态!如
button {
color: red;
}
button:focus {
color: blue;
}