纯CSS方式使按钮有两个点击状态

Pure CSS way of making button have 2 click state

本文关键字：两个 状态 方式使 CSS 按钮      更新时间：2023-09-26

所以很简单，

我想为一堆子菜单项使用一些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;
}
相关文章：