Question

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

使用:focus伪类可以在伪类处于活动状态时保持显示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时会触发一个事件，但是看起来无法再点击相同的按钮或重点。因此，单击黄色div不会触发事件恢复为蓝色，除非我们以某种方式欺骗浏览器认为相同的点击空间是外部区域 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.

使用时忽略光标样式：焦点以创建CSS切换

1 个答案: