擬似クラス:hoverを使う
擬似クラスとは。。。
CSS の擬似クラスは、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。
hover以外にも、activeやvisited,checkedなど、他にもたくさんある。
これをつけることで、特定の状態になり、要素なども別に指定できる。
使い方は、擬似クラスをつけたい要素に、:hover
とするだけ。
次からが本題。
hoverで別の要素のスタイリングする
hoverして、別の要素を動かしたい時
要素:hover +別要素
と書きます。 ‘+’ は、他の要素を指定するときに書く。子要素の時は書かなくても良い。
以下のコードを参照してください。
See the Pen
hover1 by rea-jin (@rea-jin)
on CodePen.
説明:
oya要素の中にko要素が入っており、コード上、番号順に書かれている。
以下、場合分けして、ある要素をhoverしたときの、ある要素のスタイルを変えていく。
1.通常のhover 親要素 (oya1->oya1)
oya1をhoverして、oya1の色を変えている。
2.通常のhover 子要素 (ko1->ko1)
oya1の中にある子要素ko1をhoverして、それ自体を操作したい。
これは可能だが、oya1まで変化している。
子要素をhoverした時、親要素もhover対象となる。
3.子要素の同階層への操作 (ko1->ko1-2)
ko1をhoverして、ko1-2を操作したいが、できない。
これは同階層にある子要素。
コードや2の結果からわかるように、
親要素の中に入っており、親要素をhoverしているので、子要素から子要素へはhover操作できない。
4.親要素をhoverして子要素を操作 (oya2->ko2)
oya2をhoverしたとき、ko2の色を変えている。
これは可能である。
さらに、ko2をhoverするということは、oya2もhover対象なので、これもko2の色が変わる。
次は、以下のコードを参照してください。
See the Pen
hover2 by rea-jin (@rea-jin)
on CodePen.
5. 親要素をhoverして同階層の親要素を操作 (oya3->oya4)
oya3をhoverして、oya4の色を変更。
これも可能である。2や3のように、親要素に囲われておらず、自身だけがhover対象となっている。
6. 親要素をhoverして、他の親の子要素を操作 (oya3->ko4)
もう気づいたかもしれないが、oya3をhoverした時に、ko4も色が変わっている。
これは、要素の指定の仕方が重要で、’+.ko4’だけでは変化しない。
‘+.oya4 .ko4’ というように、どの親か指定する。半角スペースも入れる。
わかりづらければ、5の操作をコメントアウトして見て欲しい。
7. 子要素をhoverして、他の親や他の子要素を操作 (ko4->oya5 or ko5)
これはどちらもできない。
子要素をhoverすると親要素もhover対象といったが、きちんと親要素をhoverしないと他は操作できない。
子の力じゃ他は動かせないということか。
8. 親要素をhoverして、他の親を操作 (下から上) (oya5->oya4)
できない。
一番言いたかったのはこれで、なぜこれができないのか結構調べた。
しかし、全然見つからなかったので、自分で気づいた。
HTMLはドキュメントツリー構造で、上から下へ処理されるからなのでは? と。
常識だが、初学者は忘れがちなことかもしれない。
cssみたいに、順番気にせず書いてたら、できそうな気がするもの
。
処理された後に、操作しようといっても、cssじゃできないと言うことですね。
参考
https://techacademy.jp/magazine/19418