【:hover擬似クラス】カーソルが乗っている要素のスタイル

:hoverでは、マウスカーソルが乗っている要素に対してスタイルを適用することができます。 これはユーザーがマウスカーソルなどのポインティングデバイスをその要素の上に置いていて、まだアクティブ(クリック)していない状態の時に対してスタイルを適用します。

また:hoverをリンク部分に対して指定する場合は、:link:visitedの後、かつ:activeよりも前に記述するようにします。 これはcssでは下に記述したものから優先して適用されるためで、:hoverと他の疑似クラスを併せて使用する場合は必ず「:link」「:visited」「:hover」「:active」の順番で記述するようにして下さい。

他にも、クリックされた時などのスタイルを指定したい場合は、下記の疑似クラスを併せて使用します。

※疑似クラスとは、スタイルを適用する対象を要素名や属性名でなく、要素の状態や特徴で分類するものです。 例えばマウスカーソルが要素に乗った時や要素がアクティブにされた時など、他のセレクタでは表せないような状態に対してスタイルを適用することが可能となります。

  • :link ……… 未訪問(キャッシュされていない)ページへのリンク部分のスタイル
  • :visited ……… 訪問済み(キャッシュされている)ページへのリンク部分のスタイル
  • :hover ……… マウスカーソルがその要素の上にある時のスタイル(まだアクティブでない時)
  • :active ……… マウスボタンを押した時のスタイル(要素をクリックし離すまで)
  • :focus ……… 要素にフォーカスが移った時のスタイル

※リンクに関する疑似クラス …… :link , :visited
※動的な疑似クラス …… :hover , :active , :focus

これらは、リンク部分に対してスタイルを適用させたい場合に使用され、通常はa要素に対して指定します。 ですが「#id名」や「.クラス名」を指定する事で、特定のリンク部分に対して他のスタイルを適用することもできます。

またリンクに関する疑似クラスと動的な疑似クラスをa要素に適用すると、リンクが設定されている要素の状態やリンク先への訪問状況に応じたスタイルを細かく指定することができるようになります。

書式

  • 要素名:hover {プロパティ名:値;} ……… カーソルが乗っている(重なっている)要素に対しスタイルを適用

※要素名には、「#id名」や「.クラス名」も指定できます

使用した時の例

/* 通常のリンクへの設定 */
a:link {color: #0000ff;}     /* 未訪問のリンクの色 */
a:visited {color: #9400D3;}  /* 訪問済みのリンクの色 */
a:hover {color: #fff; background: #0000FF;}  /* リンクにカーソルが乗っている時の色 */
a:active {color: #fff; background: #9400D3;} /* クリックした時のリンク色 */
  
/* 特定のクラスが指定されているリンクへの設定 */
a.sample:link {color: #0000ff;}     
a.sample:visited {color: #9400D3;}  
a.sample:hover {color: #fff; background: #0000FF;}    
a.sample:active {color: #fff; background: #9400D3;}
  
/* 特定のクラスに含まれているリンクへの設定 */
.sample1 a:link {color: #0000ff;} 
.sample1 a:visited {color: #9400D3;} 
.sample1 a:hover {color: #fff; background: #0000FF;}  
.sample1 a:active {color: #fff; background: #9400D3;}
<a href="/hp-web/">ホームページ作成</a><br />
<a class="sample" href="/hp-web/html-abc/">HTMLリファレンス</a>
<div class="sample1"><a href="/hp-web/css/">CSSリファレンス</a></div>

ブラウザ上の表示例

対応ブラウザなどのデータ

適用対象 カーソルが乗っている要素
対応ブラウザ Internet Explorer , Google Chrome , Firefox , Opera , Safari

関連情報