html - 禁用 div 并更改光标

Question

我有需要禁用的 div 元素。所以我为它定义了以下 CSS 类:

.hideDiv {
    pointer-events: none;
    cursor: not-allowed;
}

虽然 CSS 类的第一行工作正常，但第二行却不行。你能帮我解决这个问题吗？

请注意，我需要在 Internet Explorer 上完成这项工作。

Answer 1

pointer-events: none 将有效地停止鼠标与 .hideDiv 的交互。这意味着悬停在 div 上的 Action 也将被阻止，从而使光标不出现。

相反，您可以将 .hideDiv 包装在另一个 div 中，并将 cursor 属性添加到外部/父 div。

请看下面的例子:

.box {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

.parent {
  cursor: not-allowed;
}

.hideDiv {
  pointer-events: none;
}

/* Remove pointer-events: none and the below css works */
.hideDiv:hover {
  background-color: lime;
}

<div class="parent box">
  <div class="box hideDiv">
  </div>
</div>