禁用div并更改光标

Question

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

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

虽然CSS类的第一行工作正常，但第二行没有。你能帮帮我吗？

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

Answer 1

pointer-events: none将有效阻止小鼠与.hideDiv的相互作用。这意味着还将阻止悬停在div上的操作，从而使光标不显示。

相反，您可以将.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>