なぜこのCSSは無効ですか？

Question

私はこのCSSを持っている：

.optionQuiz a:hover{ 
     .Qtick{ 
      background-color: green; 
     } 
    } 

マイHTML：

<div class="optionQuiz"> 
<a href="#"> 
<span class="Qtick">1</span> 
</a> 
</div> 

マイGOAL： ユーザーが<a>クラスとスパンの上にマウスを置いたときに私の目標です'<a>'内で強調表示されます。

MY質問： このCSSが機能しなかったのはなぜですか？これは確かに良い方法ですが、そのようなことは発明されていないようです？どうして？ JavaScriptを使うべきですか？私はほしくない。私はCSSの方法でそれをしたい。

何か助けていただければ幸いです。

Answer 1

JavaScriptを使用する必要はありません。あなたは非常に簡単な方法でのみCSSでそれを解決することができます。次のコードを参照してください：

.optionQuiz a:hover .Qtick { 
 
    background-color: green; 
 
} 
 
.optionQuiz a:hover .other1 { 
 
    background-color: blue; 
 
} 
 
.optionQuiz a:hover .other2 { 
 
    background-color: yellow; 
 
}

<div class="optionQuiz"> 
 
    <a href="#"> 
 
    <span class="Qtick">1</span> 
 
    <span class="other1">2</span> 
 
    <span class="other2">3</span> 
 
    </a> 
 
</div>

Answer 2

プレーンなCSSでは、ネストされたセレクタは使用できません。

a:hover span.Qtick{ 
 
    color:red; 
 
}

<div class="optionQuiz"> 
 
<a href="#"> 
 
<span class="Qtick">1</span> 
 
</a> 
 
</div>

：

あなたは、あなただけのCSSを使用したい場合は、このようなものを使用する必要があります...

をサス、PostCSS、少ないなどのプリプロセッサを使用してそれを行うことができます

Answer 3

ないあなたはこれがどうなる色 を変更したい場合は

.Qtick{ 
      background-color: green; 
     } 

が

...何のためにあるのかを確認します。

.optionQuiz a:hover{ 
      background-color: green; 

    } 

次のセレクタ蛍光ペンを使用するだけでスパンしたい場合：これはCSSではありませんので

.optionQuiz a:hover >span.Qtick{ 
     background-color: green; 

}