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

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; 
} 

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 div{ 
 
    cursor:wait; 
 
} 
 
.cursor-wait{ 
 
    cursor:wait; 
 
}

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