Firebug で要素をマウスオーバーときの CSS を調べる

1. 要素をマウスオーバーしたときのスタイルは :hover で指定

Web サイトにおいて、要素をマウスオーバーしたときに見かけを変化させたい場合、CSS の

:hover

を利用する。

hover については Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification の 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus を参照。

The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element.  

 

2. Firebug で :hover を指定する

:hover の指定をブラウザ上で Firebug を用いて微調整し、確認するにはどうすればいいのだろう？

意外と知られていない 機能が多い！？Firebugの使い方 | THE HAM MEDI によると、

「:hover」の擬似クラスをつけた要素を、実際にマウスが乗った状態にしてくれます。

THE HAM MEDIA via kwout

要素をマウスオーバーして見かけが変化した後にマウスをさっと下に動かして、必死に :hover のスタイルを変えようとしたけど「できねぇ～」と諦めてた。 ^^;

 

3. :hover を指定する例

例えば アップル サイトにおけるトップのメニュー `iPhone’ の :hover を有効にするには、

1. Firebug を起動する。
2. `iPhone’ のメニュー要素に対応した li 要素内の a 要素を選択
3. 右側のペインにおける スタイル で :hover を選択

これで :hover に設定されている指定を変更することができた。

 

4. その他

上記解説サイトに書かれていた Firebug 内にコメントを表示できるのも知らなかったなぁ。