Firebug で要素をマウスオーバー

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.  

 

スタイルにおいて :hover を指定

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

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

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

THE HAM MEDIA via kwout

へ～、知らなかった。 (@_@

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

 

試してみる

やり方を忘れないように試しておく。

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

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

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

 

その他

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