크롬 웹 검사기를 사용하여 코드를 보는 것은 매우 유용합니다. 그러나 버튼의 호버 (hover) 코드를 어떻게 볼 수 있습니까? 단추 위로 마우스를 가져 가야하므로 관리자에서 마우스를 사용할 수 없습니다 (마우스). 검사관에서이를 수행하기위한 지름길이나 다른 방법이 있습니까?크롬 웹 검사기를 사용하여 호버 코드를 보는 방법

출처

2011-04-26 Bo.

코드 = javascript 또는 css? –

이 경우 CSS –

이것은 이것과 중복되지 않습니까? http://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools – Mixologic

142

이제 가상 클래스 스타일 규칙을 모두 볼 수 있고 요소에 적용 할 수 있습니다.

스타일 창에서 :hover과 같은 규칙을 보려면 오른쪽 상단의 작은 점선 상자 버튼을 클릭하십시오.

오른쪽을 클릭, :hover 상태로 요소를 강제로.

또는, 스크립트 패널에서 이벤트 리스너 중단 사이드 창을 사용하여 마우스 오버 핸들러에서 일시 정지를 선택할 수 있습니다. 파이어 폭스에서

출처

2011-07-21 15:30:43

크롬 48 (및 이전 버전)에서는 그 점선으로 된 상자가 마우스로 가리키면 요소 상태 토글 (Toggle Element State)이라는 압정 아이콘으로 바뀌 었습니다. 그런 다음 드롭 다운 목록에서 "마우스를 올리십시오"를 선택하십시오. – sameers

당신의 질문을 이해할 수 있을지 모르겠지만 이벤트 처리기 코드를보고 싶다면 요소를 검사하고 요소 패널의 이벤트 수신기 사이드 바 창을 살펴보십시오. 또 다른 방법은 스크립트 패널에서 일시 중지 버튼을 누르고 요소를 가리 키기 만하면됩니다. 디버거는 첫 번째 이벤트 처리기의 첫 번째 명령에서 중지됩니다.

출처

2011-04-27 01:40:32 loislo

이 작업을 수행하는 방법에 대해 좀 더 구체적으로 설명해 주시겠습니까? 일반적인 경우는 내가 좋아하는 버튼 일 것이고 일반적인 검사와 같은 쉬운 방식으로 호버링 효과가 어떻게 달성되는지보고 싶습니다. –

또는 Scripts 패널에서 Event Listener Breakpoints 사이드 바 창을 사용하고 마우스 오버 핸들러에서 일시 중지하도록 선택할 수 있습니다.

출처

2011-04-27 11:07:52

약간 성가시다.하지만 요소를 마우스 오른쪽 버튼으로 클릭 한 다음 마우스를 링크 위에 올려 놓고 키보드를 사용하여 '요소 검사'링크를 선택하고 Enter 키를 누릅니다. 선택한 요소에 대한 마우스 오버 가상 클래스에 대한 CSS가 표시됩니다.

향후 빌드에서이 기능을 좀더 쉽게 사용하기를 바랍니다.

출처

2011-06-23 16:01:18 purpletonic

알아두면 좋지만, 마우스가 링크 위로 마우스를 가져 가야 할 필요가 있다는 것은 매우 실망 스럽습니다 ... 키보드 만 사용하여 요소 검사 창에서 주위를 찌를 때에도 마찬가지입니다. 얼마나 귀찮은가! –

요소를 오른쪽 마우스로 클릭하고,> Inspect를 클릭하여 포인터를 거기에 놓고, 실제로 요소를': hover' 상태로 강제 실행하는 ** 실제 ** 전체 프로세스 다음 키보드 키를 사용하여 의사 코드를 확인하십시오.이 _working_ 대안을 주셔서 감사합니다 .... 그래서 _not_ 실제로 _nuisance_! : +1 +1 – Irfan