Chrome 개발자 도구 Inspect CSS pseudo-classes (:hover 등)

F12 (OS X = Cmd + Alt + I)로 개발자 도구를 열고

아래와같이 Styles 탭 우측 상단 버트콘중 아래의 버트콘을 클릭

아래 캡춰와 같이 pseudo-class 들이 담긴 패널이 나타나는데

개발자 도구 위 웹페이지 중 돋보기 아이콘에 대해
마우스를 올렸을때 :hover 를 조회해보는것을 예로 들자면

돋보기 아이콘에 마우스를 올렸다가 내렸다 해보면
CSS 속성들 변화를 조회 수 있습니다.

마우스 올렸을때 상태만 보고 싶을때는

개발자 도구 pseudo 패널 중 :hover 체크하면
웹페이지 돋보기 아이콘에 마우스를 올린 상태로 고정 되며
아래 캡춰와 같이 CSS가 조회됩니다.