親要素から子要素へのカーソル値のオーバーライド

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 と呼ばれる要素を探している

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

を。

同じ要素に両方のクラスを追加するので、その領域を削除する必要があります。私は

ことができます。

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