如何用CSS让Div不可点击同时自定义光标样式？

当然可以，这里有两种纯CSS方案解决你遇到的问题：

方案一：利用伪元素覆盖 #

核心思路是用一个覆盖整个div的伪元素来承接鼠标事件，同时让原div失去交互能力：

1. 给目标div设置position: relative，并添加pointer-events: none来阻止自身的所有交互
2. 给div添加伪元素，让它铺满整个div区域，并设置自定义光标：

.disabled-div {
  position: relative;
  pointer-events: none;
}

.disabled-div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: not-allowed;
  pointer-events: auto; /* 让伪元素接收鼠标事件，从而触发光标样式 */
}

这个方案不需要额外的HTML结构，伪元素不会影响div内部的内容展示，同时能完全阻止div的交互，还能正常显示自定义光标。

方案二：父容器控制光标 #

如果不想用伪元素，可以给目标div套一个父容器，通过事件穿透来实现：

1. 父容器设置cursor: not-allowed
2. 目标div设置pointer-events: none

.disabled-container {
  cursor: not-allowed;
}

.disabled-div {
  pointer-events: none;
}

当鼠标移到div上时，因为div的pointer-events: none，鼠标事件会穿透到父容器，此时父容器的光标样式会生效，同时div本身无法触发任何交互事件。

两种方案都能完美实现「不可点击+自定义光标」的需求，你可以根据自己的HTML结构和样式需求选择合适的一种。

内容的提问来源于stack exchange，提问作者sir-haver