2011-03-22 2 views
26

나는 무시할 수없는 꺼리는 a:hover CSS 스타일로 고심하고있다.방화범 맺기로 CSS 가상 클래스를 검사하려면 어떻게해야합니까?

Firebug에서 요소를 검사하려고했지만 왜 작동하지 않는지 알 수 없습니다. Firebug에서 a:hover css 이벤트를 올바르게 검사하는 방법을 알지 못합니다. 방화범 http://blog.borngeek.com/2010/04/16/hover-inspection-in-firebug/

호버 검사하지만 난 거기에 설명 된 단계를 재현하는 방법을 생각하지 않은 :

을 나는 보았다.

또한 : 의사 팬텀은 http://meyerweb.com/eric/thoughts/2009/11/03/pseudo-phantoms/

어떻게 방화범이 끌려와 :hover처럼/디버그 CSS 의사 클래스를 검사합니까?

+0

Firefox 개발자 도구의 경우 [이 답변보기] (http://stackoverflow.com/a/13855134/247696). – Flimm

답변

42

꽤 쉽습니다. 검사 할 요소를 선택하기 만하면됩니다. 그런 다음 오른쪽 패널에서 Style 메뉴 항목을 클릭하십시오. 이 당신이 의사 클래스 :hover

편집을 선택할 수 있습니다

다음은 이미지입니다 : 또한 enter image description here

+0

나는 그것에 대해 결코 알지 못했다! 너무 유용합니다! – Chowlett

+0

기본적으로 질문에 링크 된 블로그 게시물에 작성된 내용이지만이 내용은 전혀 볼 수 없습니다. 다시 확인해 볼게. – augustin

+0

@augustin, 문제가있는 경우를 대비하여 이미지를 추가했습니다. – JohnP

0

Theres는 요소 검사 옵션, 그냥 파이어 폭스 + 방화범에 공중 선회 요소를 마우스 오른쪽 단추로는, 그것을 이잖아. 스타일 메뉴도 손쉽게 사용할 수 있습니다.

0

이와 같은 문제를 해결할 때 유용한 기술은 호버 상태와 비 호버 상태를 비교하는 것입니다. 브라우저의 두 인스턴스를 열면 (듀얼 또는 트리플 스크린 설정이 유용합니다), 각 창에서 작업중인 페이지를로드 한 다음 JohnP가 답변에서 말한대로 한 창에서 호버 상태의 스타일을 볼 수 있습니다. 타인의 비 호버 (non-hover), 그리고 거기에서 분석을 가져 가라. Firebug에서는 스타일 드롭 다운이 실제 css 세부 정보 창을 덮을 때 스타일을 비교하는 것이 어렵습니다. Firefug에서 마우스를 움직이면 작업중인 요소에서 마우스를 움직여 마우스를 가져 가거나 마주 치지 않는 상태 CSS를 볼 수 있습니다. 이 방법을 비교하는 것은 더 까다 롭습니다.

관련 문제