Chromeのデベロッパーツールでhover時の確認をする方法

UPDATE:2013年11月23日

実は色々とできたデベロッパーツール

サイトを作っててマージンやサイズ等を確認したりする時に、よくchromeのデベロッパーツールを使っています。
今まで感覚で使っていたのですが、結構色々と機能が充実していることを最近知りました。
 

特にマウスオーバー時の確認の仕方です。
いつも、マウスを乗せた状態で右クリックして「要素の検証」を押しつつマウスをウィンドウ上からフェードアウトさせるという、変な手法でやっていました。
 

こんな感じです。

右クリックでメニューを出し、要素を検証を押す。

カーソルをウィンドウから下げた状態でhover要素をいじる。

原因は分からないのですが、最近この手法の成功率が下がってきたので調べていたところ、デベロッパーツールでできるということをしりました。
 

やり方は、対象のhtml要素を選択する>右上の真ん中のアイコンをクリック>:hoverにチェック
 
すると、その要素に:hoverがついた状態を表示することができます。
 

こんな感じです。

カーソルのアイコンを選んで、:hoverをクリック

今後はこの方法にてマウスオーバー時のcssを確認したいと思います。
 
ただしjavaScriptで直接色を指定している場合はこのやり方では確認できないので、最初の変なやり方が無難なのではないかと思います。

Comment

コメントを残す

About me

@drox_um
25歳の2年目フロントエンドエンジニア。WEBと音楽が好き。最近カメラを買いました。お仕事募集中。

Ranking