javascript - 从父元素到子元素覆盖游标值

Question

我被困在这两者之间，无法弄清楚出了什么问题。

有多个菜单是定义了一些值的 div。有些菜单项被禁用/不可点击，有些是。我通过使用 cursor 属性来区分它们。

如果禁用，我将它设置为 cursor:default，如果启用，我将它设置为 cursor:pointer 使用类。

现在，如果单击任何菜单，它必须等待一定的时间才能加载页面。那时，我希望整个菜单容器都有光标作为加载。所以我将 cursor:wait 添加到父级。不幸的是，它不起作用。

我也试过使用 !important 但没有成功。

如有任何帮助，我们将不胜感激。

setTimeout(function() {
  var el = document.getElementById("main");
  el.className += ' cursor-wait';
  alert(el.className);
}, 4000);

.container,
.container div {
  border: 1px solid black;
}
.cursor-default {
  cursor: default;
}
.cursor-point {
  cursor: pointer;
}
.container.cursor-wait {
  cursor: wait !important;
}

<div id="main" class="container">
  <div class="cursor-point">Menu1</div>
  <div class="cursor-default">Menu2</div>
  <div class="cursor-point">Menu3</div>
  <div class="cursor-default">Menu4</div>
  <div class="cursor-point">Menu5</div>
  <div class="cursor-point">Menu6</div>
  <div class="cursor-default">Menu7</div>
  <div class="cursor-point">Menu8</div>
  <div class="cursor-default">Menu9</div>
</div>

Answer 1

你的 CSS 是这样的:

.container .cursor-wait {
  cursor:wait !important;
}

它正在寻找一个名为 .cursor-wait inside 的元素来设置样式。

由于您是在同一个元素上添加两个类，因此您需要删除空格。此外，您想在已经设置光标的元素上覆盖光标 - 而不是在父元素上:

.container.cursor-wait div {
  cursor:wait !important;
}

---

编辑:根据您的评论:

can I have something in CSS that applies to all child elements, not just divs inside container

您可以使用通配符选择器(星号)修改您的代码:

.cursor-wait * {
  cursor:wait !important;
}

setTimeout(function() {
  var el = document.getElementById("main");
  el.className += ' cursor-wait';
  alert(el.className);
}, 4000);

.container,
.container div {
  border: 1px solid black;
}
.cursor-default {
  cursor: default;
}
.cursor-point {
  cursor: pointer;
}
.cursor-wait * {
  cursor: wait !important;
}

<div id="main" class="container">
  <div class="cursor-point">Menu1</div>
  <div class="cursor-default">Menu2</div>
  <div class="cursor-point">Menu3</div>
  <div class="cursor-default">Menu4</div>
  <div class="cursor-point">Menu5</div>
  <div class="cursor-point">Menu6</div>
  <div class="cursor-default">Menu7</div>
  <div class="cursor-point">Menu8</div>
  <div class="cursor-default">Menu9</div>
</div>