有一个悬停的CSS状态，是否也可以添加一个CSS点击状态

Question

有一个悬停CSS状态，是否也可以添加一个CSS点击状态？

在该示例中，浏览器会响应鼠标悬停事件，然后应用特定的样式。你能在点击事件中做同样的事情吗？

支持：

#menu:hover

无响应：

#menu:click 

.menu {
display: none;
}
.menu li:hover {
background-color: lightgray;
}
button {
padding: 12px;
}
#hoverMenu {
position: relative;
display: inline-block;
}
#hoverMenu:hover .menu {
display: block;
}

#clickMenu {
position: relative;
display: block;
}
#clickMenu:click .menu {
display: block;
}

<div id="hoverMenu">
<button>Menu on hover</button>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="clickMenu">
<button>Menu on click</button>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

用例：

• 当您希望菜单显示在点击而不是悬停时
• 当您想要显示适合在点击时显示而不是在悬停时显示的弹出框时
• 当您不能使用JavaScript或不需要使用JavaScript时

其他人想在CSS规范中看到这一点吗？

Answer 1

没有css，你需要js来完成点击事件。接近匹配是：active或：target
，但有一个技巧或破解可以做到这一点。您的问题已经在这里得到了回答：
我可以在CSS中获得onclick效果吗？
希望这对你有所帮助。