cssのhover操作で、hoverする要素とは別の要素のスタイルを変更したいと思ったときに、色々調べたので、メモとして残します。
hoverで別の要素のスタイリングをする
hoverして、別の要素を動かしたい時要素:hover +別要素
と書きます。 '+' は、他の要素を指定するときに書きます。
hoverする要素の子要素の時は書かなくても良いです。
これから書く説明は、以下のコードを参照してください。
cssに番号をコメントでつけています。
See the Pen hover１ by rea-jin (@rea-jin) on CodePen.
説明： ()内は、hover要素->スタイリングしたい要素 となっています。以下、場合分けをして、ある要素を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
初学者による、初学者向けの記事です。間違いがあれば、ご指摘いただけると幸いです。
コメントお待ちしております。