CSS : hover時に他の要素の操作をしたい時の注意点

擬似クラス:hoverを使う

擬似クラスとは。。。

CSS の擬似クラスPseudo-classesは、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です