使用 :focus 创建 CSS 切换时忽略光标样式

Question

这个 OP 知道一个简单的 JavaScript click 事件很容易就足以作为 CSS 的替代品......但是好奇心渴望得到满足：

使用:focus伪class我们可以在伪class激活时保持pointer光标显示吗？看看。

body {
  font-family: sans-serif;
}
div {
  cursor: pointer; /* div should *Always* have a pointer cursor */ 
  width: 10rem;
  height: 10rem;
  background-color: #0dd;
  transition-property: background-color;
  transition-duration: 1s;
}
div:focus { /* Apply this only when div is focused/clicked */
  pointer-events: none; /* pointer-events disabled to allow toggle */
  background-color: #ee0;
  outline: 0;
}

<div tabindex="0"></div> <!-- tabindex allows div to be focused -->
Please click the square<br>above. Again.

请注意，当 div 为黄色时，指针光标变回其默认的鼠标指针行为？（如果没有，请稍微移动鼠标）

我想阻止光标更改。我希望光标始终保持 pointer 状态。

当 div 被点击时，一个事件被触发，但是同一个按钮似乎无法被点击或再次 focused。所以点击黄色 div 不会触发事件恢复为蓝色除非我们以某种方式欺骗浏览器认为同样的点击 - space 是一个区域 div 之外。这就是 pointer-events: none 行存在的原因。所以切换可以一次又一次地激活，就像切换应该的那样。

我唯一的愿望是以某种方式将指针光标保持在黄色 div 上而不改变它的切换行为。 pointer-events: none 这可能是不可能的，但是有什么方法可以做到这一点吗？某种类型的解决方法或破解方法？

Answer 1

您要求的答案：

body {
  font-family: sans-serif;
}
#wrap {
  position: relative;
  width: 10rem;
  height: 10rem;
}
#top {
  cursor: pointer; /* div should *Always* have a pointer cursor */ 
  background-color: #0dd;
  transition-property: background-color;
  transition-duration: 1s;
  position: relative;
  z-index: 100;
  position: absolute;
  width: 10rem;
  height: 10rem;
}
#top:focus { /* Apply this only when div is focused */
  pointer-events: none; /* pointer-events disabled to allow toggle */
  background-color: #ee0;
  outline: 0;
}
#top:focus + #bottom {
  pointer-events: all;
}
#bottom {
  position: absolute;
  background: #f00;
  pointer-events: none;
  opacity: 0;
  cursor: pointer;
  height: 10rem;
  width: 10rem;
}

HTML

<div tabindex="0" id="top"></div>
<div id="bottom" tabindex="0">
</div>
<!-- tabindex allows div to be focused -->
Please click the square<br>above. Again.

使用 :focus 创建 CSS 切换时忽略光标样式

Cursor style ignored when using :focus to create a CSS toggle

html

css

button

toggle