Google Chromeのデベロッパーツールで5秒でCSSのhoverを調べる方法

chromeデベロッパツールのhover

タイトルの通りである。今までの無知な僕を小一時間責めたい。

自分のサイトとか他人のサイトとかでhover時のCSSがいいなぁと思ってもデベロッパーツールで確認できなくてイライラしていたところこの方法を見つけました。というか誰でも知っていると思う。

やり方は簡単。Chromeのデベロッパーツール(因みにショートカット⌘+option+iを使うと楽)を開いてセレクタモードにして該当箇所をクリック。

:hoverをクリック

StyleのタブのFilterの横に:hovとあるのでクリック。

Force element stateのhoverをクリック

Force element state(要素の強制)のボックス内の:hoverのチェックボックスを✔︎

hover時のcss

そうするとhover時のCSSが確認できます。

因みにhoverだけでなくactiveなども確認できるのでとっても便利ですね!やったねたえちゃん!

やったねたえちゃん

サービス
スポンサー
関連記事
当サイトで掲載している画像の著作権・肖像権等は各権利所有者に帰属致します。権利を侵害する目的ではございません。記事の内容や掲載画像等に問題がございましたら、各権利所有者様本人が直接メールでご連絡下さい。確認後、対応させて頂きます。お問い合わせはこちらから。またまとめ記事など不適切な文言は随時修正しております。そのため、本スレッドと異なる部分が出てきますので予めご了承ください。
jupiter

みんなのコメント