【CSS】:hover疑似クラスで指定要素とは別の要素にスタイルを適用する

公開日: : 最終更新日:2014/08/14 CSS

スポンサーリンク

CSSの「:hover」疑似クラスを使えばマウスオーバー時にその要素に対して何らかのスタイルを適用させることが可能ですが、:hoverエフェクトを指定した要素以外の要素にスタイルを適用させたいときには隣接要素の場合は「+」兄弟要素の場合は「>」として以下のようにします。

<style type="text/css">
<!--
#test:hover{
background-color: blue;
}
#test:hover + #target{
background-color: red;
}
#test:hover > #inner{
background-color: green;
}
#test:hover > #inner:hover{
opacity: 0.7;
}
-->
</style>
<div id="test">
<div id="inner"></div>
</div>
<div id="target"></div>

デモ)

#test

#inner
#target

さらに兄弟要素のときに:hover疑似クラスを重ねがけしたいときは上のように単純に:hoverをもう一つ付けるだけで大丈夫です。

HOVER!(1) (カドカワデジタルコミックス)
KADOKAWA / 角川書店 (2012-09-01)
スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

【CSS】beforeのcontentで改行する

.bsample1:before{ content:"★参考★\A"; } .bsampl

記事を読む

5秒でできる!超簡単にCSSで吹き出し作成!

『CSS ARROW PLEASE!』というCSSだけで作る吹き出し作成サービスがあるの

記事を読む

【HTML/CSS】タイトルロゴ画像の設定の方法

自分のブログやサイトのタイトル部分にトップ絵画像を設置する方法です。方法としてはimgタグをHTML

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑