是否有JS替代JS点击，（因为：悬停是另一种鼠标悬停/鼠标移出）？

Question

更新：感谢Crowes和Boltclock的解释，我现在更清楚地了解到CSS伪类明确地 stative （即描述元素的状态）现在的时刻）。

虽然javascript事件有一个按时间顺序排列的维度，但相比之下，CSS伪类在当前时刻是或 false 。

因此，与它们表面上类似的javascript事件不同，CSS伪类不会（也不能）引用回到用户之前与该元素的交互。

这使我的问题在很大程度上是多余的。

2017年，令人惊讶的是，虽然CSS几十年来已经:hover，但仍然缺乏伪类最明显的补充 - :click。

我搜索过Stackoverflow和2012年11月的问题：

Can I have an onclick effect in CSS?

评分最高的答案：

  

使用:active

不是onclick的非常好的替代品 - 如果有:active实际上是onmousedown的替代品。

评分第二高的答案 -

  

使用复选框hack

不是语义的（而且......随着黑客攻击，感觉非常hacky）。

因此。 javascript的onclick是否有最低限度的纯CSS替换？

Answer 1

  

是否有最低限度的纯粹CSS替代javascript的努力   onclick？

是的，有一种直接使用CSS实现onclick行为的方法。

两个步骤：

1. 将tabindex="0"添加到需要onclick行为
的元素
2. 使用:focus伪元素激活onclick行为

示例：

p {
width: 100px;
height: 100px;
margin: 0;
line-height: 100px;
font-size: 16px;
text-align:center;
color: rgb(255,255,255);
background-color: rgb(255,0,0);
font-weight: bold;
cursor: pointer;
transform: rotateY(0deg);
transition:
    width 1s ease-out,
    font-size 1s ease-out,
    line-height 2s ease-out,
    height 1s ease-out 1s,
    transform 1s ease-out 2s;
}

p::after {
content:' Me';
}

p:focus {
width: 300px;
height: 200px;
line-height: 200px;
font-size: 36px;
transform: rotateY(360deg);
}

p:focus::after {
content:' Elsewhere';
}

<p tabindex="0">Click</p>