CommentOut

マウスを重ねた所以外をhoverで動かしたい マウスを重ねた所以外をhoverで動かしたい

マウスを重ねた所以外をhoverで動かしたい

公開日:  最終更新日:

例えば、記事リンクにマウスを重ねた時、一部の文字色を変えたいとか、そういう時です。
サンプルを見てもらうのが手っ取り早いでしょう。

子要素のスタイルを変化させる場合

hoverが発生した要素ではなく、hoverが発生した要素の子要素を変化させるパターンです。
これは簡単なので、最初に子要素から説明していくことにしました。

重要なのはCSSの.link:hover > .categoryです。

.link .category {
    background: #888;
}

.link:hover .category {
    background: #0a8;
}

linkクラスの中にあるcategoryクラスを持つ要素の背景色を灰色に設定し、親要素のlinkがhover状態になった時、その下のcategoryクラスの背景色を変更するというものです。
理解してしまえば、簡単ですが私も難しく考えてしまい、初めは感覚が掴めませんでした。
これは直下の子要素であれば、”>”セレクタを使っても良いです。
そして、以下ではこのセレクタが重要になります。

兄弟要素のスタイルを変更する

このサンプルでは、赤いボタンの上にマウスオーバーすると青いボタンの色が変わります。
これはセレクタを使わないと実現できません。

.btn-blue {
    background: #55f;
}
.btn-red:hover + .btn-blue {
    background: #5f5;
}

まず、青ボタンは平常時は青です。
そして、兄弟要素の赤ボタンがhover状態になると、’+’セレクタでその下にあるbtn-blueクラスの背景色が上書きされて、緑に変わるというわけです。

ただし、子要素がhoverになっても親要素に影響を与えることはできません。
これはDOMは樹形図のように、どんどん派生していくため、親要素であったことは子要素に伝えられるが、その逆はないんですね。
そういう時はJavascriptが必要になります。

宣伝
WordPressサイトのテンプレート編集やトラブル対応、バグ修正、簡単なJavascriptの作成(カルーセルやバリデーション等)など、小規模なスポット対応を受け付けております。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。

この記事を書いた人

uilou

uilou

プログラマー

基本的に、自分自身の備忘録のつもりでブログを書いています。 自分と同じ所で詰まった人の助けになれば良いかなと思います。 システムのリファクタリングを得意としており、バックエンド、フロントエンド、アプリケーション、SQLなど幅広い知識と経験があります。 広いだけでなく、知識をもっと深堀りしていきたいですね。