Posted at

chromeのデベロッパーツールでcssのhoverを調べる方法

More than 3 years have passed since last update.


概要

cssでサイトのデザインをする時にはchromeのデベロッパーツールでセレクタを確認しながら調整をする事が多いのだが、hoverやactiveの要素を調べるやり方がよくわからなかったので調べてみた。


結果

ググったらすぐ出てきた。

http://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools

choromeデベロッパーツールを開いてElementsタブを選びさらにStylesを選んだところにある画鋲iconをクリックすると好きな擬似クラスを指定して調べられる。

02.jpg

何度も見かけてたはずの画鋲がこんなに便利だとは知らなかった。