Google Chromeにある「要素の検証」という機能。HTMLとCSSが読めるので、ブログのデザインを書いたりするときにはチョー便利ですよね！
そんな要素の検証を使っている時、「ああ、このリンクにマウスを乗せたときの色を確認したいなぁ」なんて時があります。ありませんか？
そんなとき、マウスを乗せっぱなしにしても色情報が表示されないんですよね・・・。
実は、要素を検証でマウスオーバー時のCSS(hover)を確認するには以下の操作が必要なんです。
「要素の検証」でマウスオーバー時の状態を確認する手順
まずは要素の検証を開きましょう。
要素の検証を開いたら、マウスオーバーの状態が見たい行を選んで、右側に注目。
点線のワクにマウスカーソルが乗ったようなマークがありますね。コレを押しましょう。
押すと、４つのチェックボックスが出てきます。
このなかから、:hoverのチェックボックスにチェックを入れましょう。
めでたくマウスオーバー時の色などなどが表示されました。
hoverだけじゃなく、active, focus, visitedもあるよ
画像を見て分かるように、hover以外の状態についてもチェックを入れることで確認できます。
使えると便利な「要素の検証」、素人でも大丈夫！
要素の検証、使えるとかなり便利です。
今のCSSを書き換えずに、その場でお試し＆確認ができるところが良いですね。
使いこなせばいろんなことが出来るんですが、何も全部使う必要はありません。自分が必要なところだけ、使えればいいのです！私もHTMLとCSSをただ見る以外では、この「hoverにする」くらいの使い方しかしていません。
気になる方は他のボタンも押しつつ、どんなことが出来るのか探ってみても楽しいですよ！
