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内的.container 元素来设置样式。

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

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

修改：根据您的评论：

我可以在CSS中使用适用于所有子元素的内容，而不是只是容器里面的div

您可以使用通配符选择器（星号）修改代码：

.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>

Answer 2

您的菜单项有自己的css指定祖先规范不会覆盖它。只需为项目本身创建一个选择器

.cursor-wait, .cursor-wait div{
  cursor:wait;
}

＆＃13;

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

＆＃13;

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

＆＃13;

<div id="main" class="container">
  <div class="cursor-point">Menu1</div><span>some span</span>
  <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>

＆＃13;

覆盖从父元素到子元素的游标值

2 个答案: