【CSS】:hoverで別の要素の値を変更したい

CSSに関して悩んでいます。

ある要素にカーソルを持っていったときに別の要素にcssを適用したいのですが、

HTML
1<head>
2<style type="text/css">
3
4.b2:hover + .a1{color:pink;}
5
6</style>
7</head>
8
9<body>
10
11<span class="a1">あいうえお</span>
12<br><span class="b2">かきくけこ</span>
13
14</body>

このような感じで記述しているのですが一向に変化がありません。
調べたところによるとこれで変化するみたいなのですが、記述に間違いはあるでしょうか。。

初歩的な質問で申し訳ありません。
分かる方いましたらよろしくお願いいたします。

行動規範の内容に同意します

回答3件

現状で用意されているセレクタ (もしくは擬似クラス) では、ある要素よりも前にある兄弟要素を選択することは出来ません。CSS のみで行うならば、 has 擬似クラスも使用出来ません。また、質問文のコードに関してですが、隣接兄弟結合子 (+) は直後の要素に対して一致するため、直前の要素とは一致しません。もし直前の要素に一致するとしても直前の要素は br 要素で、 br 要素に対して .b2 クラスが付与されておらず、そもそも br 要素は選択したい要素ではないため、意味のない記述となります。

§ 2.1. Live vs Snapshot Selector Profiles

CSS implementations conformant to Selectors Level 4 must use the live profile for CSS selection. Implementations using the live profile must treat selectors that are not included in the profile as unknown and invalid.

もし文書構造を変えて良いのならば、 .b2 クラスが付与された要素を .a1 クラスが付与された要素よりも前に記述し、 CSS によって互いの位置を入れ替えることで、質問者さんの実現したいことが擬似的に行えます (動作確認用リンク)。要素の位置を入れ替える方法は多くありますが、今回は flexbox を使用した方法を示します。なお、要素の位置を入れ替える必要があるため、文書構造が複雑になるほど CSS が複雑になってゆくことに注意する必要があります。

HTML
1<div class="box">
2  <span class="b2">かきくけこ</span><br>
3  <span class="a1">あいうえお</span>
4</div>

CSS
1.box {
2  display: flex;
3}
4
5.b2 {
6  order: 1;
7}
8
9.b2:hover ~ .a1 {
10  color: pink;
11}

投稿2019/11/30 20:22

編集2019/11/30 20:29

s8_chu

総合スコア14731

s8_chu

2019/11/30 20:59

もし文書構造を変えられないのであれば、 aoies さんの回答にあるように JavaScript を使用すると良いと思います。

行動規範の内容に同意します

"+"は+の前に書かれた要素の"直後"の要素に対してかかります。

この例をみてください。

「.b2:hover+ .a1{color:pink;}」と書くと、b2がホバーした時、b2の直後のa1「あいうえお」のみが反応します。

また、「.a1:hover+ .a1{color:orange;}」と書いているのに、1つめのa1「あいうえお」がホバーした時「さしすせそ」は色が変わりません。これは間に<br>要素が入っていて、「さしすせそ」が「あいうえお」の"直後の要素"とはならないためです。
まあ色々自分でいじってみると一番理解しやすいと思います。

cssで実装可能な方法もあるかもしれませんが、ホバーなどの時に他の要素のスタイルを変えたいときはJavaScript、JQueryで実装することが多い、あるいはラクなような気がします。
参考スクリプト

私もアマチュアなので確かなところはわかりませんけれども。

投稿2019/11/30 20:41

編集2019/11/30 20:49