仅使用 html 和 css 单击两次后更改光标？

Question

我知道我可以使用以下 CSS 代码一键更改光标：

#slide-arrow-prev:active {
    cursor: not-allowed;
}

有没有办法使用only html 和 css 在两次点击后更改光标？我很好奇是否可以在不使用 javascript 的情况下做到这一点。如果是这样，请问如何。谢谢你

Answer 1

如果您决定不使用 JS，则可以通过将子元素作为父元素中的 focusable 元素 并在第一次单击后禁用它的

pointer-events

来实现此目的。这是一个实现：

#slide-arrow-prev{
  height: 50px;
  width: 80px;
  background: lavender;
}

#inner {
  height: 100%;
  width: 100%;
}

#slide-arrow-prev:focus{
  cursor: not-allowed;
}

#inner:focus {
  pointer-events: none;
}

<div tabindex=0 id="slide-arrow-prev">
  <div tabindex=0 id='inner'>
    Click Me
  </div>
</div>