CSSクラス内でより多くのスパンを一度に選択

Question

CSSで同じクラスのスパンをさらに選択するにはどうすればよいですか？私は特にホバリングのためにそれを必要とします。

私は最初は全く動作しない、2つ目は、一度に1つのスパンのために働くspan.classname:hover と.classname span:hover てみました。

これは、HTMLがどのように見えるかです：それはホバーされているとき

Answer 1

:hoverセレクタは、スパンに適用されます。

div.special:hover span { 
 
     color: red; 
 
    }

<div class="special"> 
 
    <span>Span</span> and another <span>Span</span> 
 
</div>

これは、内部のすべてのスパンに適用されます：あなたは要素の上に置くと、要素内のすべてのスパンを強調したい場合は

は、あなたが:hoverセレクタが左にシフトする必要がありますあなたが特別なdivの上にマウスを置いたとき、特別なdiv。

スパンが1つ上がったときに他のスパンを有効にするには、スクリプトを作成する必要があります。CSSで最も近いのはスパンやその他のスパンで動作する一般的な兄弟セレクタですそれは同じ親の中でそれに続く。私はあなたがそれも後方に働くことを望んでいると思いますが、この場合はそうではありません。

span:hover, span:hover ~ span { 
 
    color: red; 
 
}

<div> 
 
    <span>Span</span> and another <span>Span</span> 
 
</div>