html - 禁用 div 并更改光标

Question

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

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

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

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

标签： htmlcss

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>