使 div 在 CSS 中不可点击，同时仍然控制光标 [重复]

Question

我知道使用 CSS 制作不可点击的 div 的最好方法是使用：

  pointer-events: none,

但是光标将永远是默认的：

pointer-events: none;
cursor: not-allowed; // THIS WON'T DO ANYTHING

有没有一种方法可以在 CSS 中同时实现（希望不用 Javascript）？仅设置

cursor

将显示 div 仍然不可点击。

Answer 1

您可以做的一件事是使用

:before

伪元素在 div 上创建一个不可见的覆盖层以防止点击。您还可以向此伪元素添加光标属性

not-allowed

以直观地指示 div 不可单击。

举个例子：

// optional style
div {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: grey;
}

.not-clickable {
  position: relative;
}

.not-clickable:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%
}

.not-clickable:hover:before {
  background-color: rgba(0, 0, 0, 0.1); // Optional hover effect
  cursor: not-allowed
}

<div class="not-clickable">You can't click me</div>