[FE] hover 고정하고 DevTools 보고 싶을 때

프론트 개발을 할 때 크게 신경은 안 쓰고 있긴 했지만, 마우스 Hover 상태를 코드 말고 디버깅 툴 사용할 때 고정할 수 없을까? 라는 생각은 하고 있었지만 역시 잠깐 찾아보니 그런 방법은 다 나와 있네.

F12를 누르거나 윈도우라면 Ctrl + Shift + j 맥이라면 option + command + i을 눌러서 DevTools을 열고, Elements(요소) 탭 클릭하고 Styles 탭 바로 밑에 쪽에 보면 :hov 라는 버튼이 보이는데 여기 누르면 가상 선택자를 제어할 수 있는 컴포넌트가 활성화된다.
버튼 가상 선택자에 따른 애니메이션 스타일링 할 때, 요긴하게 써먹을 수 있을 것 같네.

출처

• 참고 링크