覆蓋從父元素到子元素的遊標值

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>