Chrome DevTools에서 :hover 스타일을 어떻게 검사할 수 있나요?

Chrome 개발자 도구에서 hover 스타일 검사

Chrome에서 요소의 스타일을 검사할 때 적용된 스타일을 보고 싶을 수도 있습니다. 요소가 :hover 상태일 때. 요소 상태 선택을 위한 편리한 드롭다운을 제공하는 Firebug와 달리 Chrome의 개발자 도구에는 이 기능이 부족한 것처럼 보일 수 있습니다.

은신처 찾기

두려워하지 마세요! Chrome 개발자 도구에서는 실제로 :hover 스타일을 검사할 수 있습니다.

이러한 스타일에 액세스하려면 Chrome 개발자 도구의 요소 패널로 이동하여 오른쪽 상단에 표시된 작은 ":hov" 텍스트를 클릭하세요. 스타일 창의 이렇게 하면 :hover를 포함한 의사 클래스 규칙의 표시가 전환됩니다.

호버 상태 강제 적용

또한 요소를 :hover에 강제로 넣을 수 있습니다. 더 쉽게 검사할 수 있도록 상태를 지정합니다. 요소를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 ":hover"를 선택합니다. 이렇게 하면 요소에 :hover 스타일이 적용되어 효과를 관찰할 수 있습니다.

추가 리소스

Chrome 개발자의 요소 패널에 대한 자세한 내용은 도구는 바로가기 종합 가이드를 참고하세요.

위 내용은 Chrome DevTools에서 :hover 스타일을 어떻게 검사할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!