Firebugを使って:hoverのスタイルを調べる方法

Firefoxのアドオン「Firebug」を使ってブラウザ上でスタイル（CSS）を確認することが多いのですが、「:hover」箇所の指定内容が見られず不便だなぁと思っていたところ、解決方法がわかったのでメモします。

不便だなぁと思っていた点

たとえばマウスオーバーすると色が変わる要素のスタイルを見てコピペしたいときに、マウスオーバーしている状態のときしかスタイルの内容がFirebugに表示されないので、コピペできないですし、たくさんのクラスをまとめて指定していてずらずらと長くなってしまっているときなどは、Firebugを別窓で開いて内容が見られなかったりしていました。

↓マウスオーバーしてるだけ表示されています

解決方法

Firebugの画面右側の方にある「スタイル」タブ右側の「▼」をクリックすると表示されるメニューから、「:hover」を選んでクリックします。

それから対象の要素を選ぶと、マウスオーバーが外れた状態でも「:hover」のスタイルが表示されるようになりました。これで、コピペできますし、クラスがたくさんでもスクロールして見られます。

参考にさせていただきました

こちらのブログに書かれているのを拝見して、こういう機能があることを知ることができました。ありがとうございます！
→ Firebug で要素をマウスオーバーときの CSS を調べる | すぐに忘れる脳みそのためのメモ

まとめ

いままで対象のクラスを目視で確認してcssファイルを開いて検索して指定の内容を見る、というちょっとめんどうなことをしておりましたが、これでゆったりと心置きなくスタイルが確認できるようになりました。ただ、Google ChromeのFirebugだと「スタイル」の横に「▼」が表示されないので、この機能は使えないのかもしれません（未確認）。Firebugは他にもいろいろ便利な機能がありそうなので、もっといろいろ使ってみたいと思いました。