Question

非常简单，

我想为一堆子菜单项使用一些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类...如果点击了不同的菜单项，我想添加一个类

Answer 1

基本相同。

<强> 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

Answer 2

答案很简单......

只需使用css焦点即可实现按钮的两种状态！例如

button {
    color: red;
}

button:focus {
    color: blue;
}

纯CSS制作按钮的方式有2个点击状态

2 个答案: