CSS / Javascript 호버 문제를 수행하는 방법

CSS / Javascript 호버 문제를 수행하는 방법

---

나는 종종 : hover 선택기로 인해 적용되는 hover 이벤트 또는 다른 CSS 규칙에 대한 반응으로 Javascript로 인한 DOM 변경과 관련된 CSS 문제 레이아웃을 선호하고 싶어합니다.

일반적으로 Firebug를 사용하여 문제를 요소를 검사하고 CSS 속성이 무엇인지, 해당 속성의 출처를 확인합니다. 그러나 호버링이 적용되는 경우 마우스를 Firebug 패널로 이동하자마자 관심있는 요소가 더 이상 호버링되지 않고 적용되는 CSS 규칙이 다르기 때문에 불가능 해집니다. DOM이 변경됩니다.

hover 이벤트 동안 처럼 DOM을 검사하기 위해 DOM 상태와 : hover 응용 프로그램을 "고정"할 수있는 방법이 있습니까?

물론 이런 종류의 문제를 발생하는 방법에 대한 다른 아이디어는 환영합니다.

---

onmouseover.NET Framework를 사용하는 요소에 함수 처리기를 추가 합니다 :hover. 해당 함수 내 console.info(element)에서 알고 싶은 요소를 호출하십시오 .

myHoverElement.onmouseover = function() {
    console.info(document.getElementById("someotherelementofinterest"));
};

방화범이 활성화 된 상태에서 실행하면 방화범 콘솔에서 요소를 검사 할 수 있습니다.

---

Firebug는 "버기"입니다. 요소를 검사 한 다음 html 탭을 클릭하면 예를 들어 DOM 탭으로 이동합니다. html 탭으로 돌아 가면 오른쪽에있는 "style"css 탭에 화살표 드롭 다운 선택기가 있습니다. : 활성화 할 해당 요소의 상태를 호버합니다. 그것을 보여주기 위해 탭을 전환해야하는 것은 짜증나지만 그것은 나를 위해 작동합니다.

---

링크를 검사 할 때 Firebug는 기본 CSS 상태, 즉 a : 링크에 대한 스타일을 표시합니다. hover 및 : active 스타일은 표시되지 않습니다. 여러 가지 스타일을 클릭하고 적절한 옵션을 선택하여 링크 상태를 유지합니다.

---

Firebug에서 HTML보기에서 오른쪽 패널을보고 "스타일"탭을 찾으십시오. 클릭하여 선택 :hover합니다.

---

Firefox (v33.1.1) :

• 요소 검사 (Q)
• DOM보기에서 요소를 마우스 오른쪽 단추로 클릭하십시오.
• 하단에서 : hover, : active 또는 : focus를 선택합니다.

---

Dojo와 같은 일부 JavaScript 툴킷은 : hover 대신 dijitButtonHover와 같은 CSS 클래스를 사용하여 스타일을 지정합니다.

따라서 스타일 탭 : 호버 트릭이 작동하지 않습니다.

대신 HTML 탭에서 노드 (CSS 클래스 변경자)를 마우스 오른쪽 버튼으로 클릭하고 "속성 변경시 중단"을 클릭 할 수 있습니다.

---

Chrome (버전 35) :

• 요소를 점검하다
• 요소 뷰어 내에서 요소를 마우스 오른쪽 버튼으로 클릭합니다.
• "강제 요소 상태"-> : 활성, : 호버, : 초점, : 방문 선택

---

CSS 문제의 경우 웹 개발자 플러그인이 매우 유용합니다.

http://chrispederick.com/work/web-developer/

로드하면 두 가지 도구를 사용할 수 있습니다.

1. 마우스 오버 요소의 파일에서 상속 된 CSS, shift-ctrl-y 사용

2. css 계산 (.css 파일에없는 인라인 스타일 = 적용됨 또는 jquery 등의 .css 메소드를 통해 적용됨) -shift-ctrl-f를 사용합니다.

후자는 또한 요소에 모든 클래스를 반환합니다.

물론 숨겨진 필드 및 쿠키 편집 (침투 테스트에 사용할 수 있음)을 포함하여 양식의 존재와 같은 다른 유용한 용도도 있습니다.

---

해당 요소를 검사 한 다음 스타일 탭에 작은 드롭 다운 화살표가 있어야합니다. 그것은 "연락처보기 사용자 에이전트"뭔가를해야합니다, 더 후 그 아래의 2가 있어야한다 "약식 속성은 확장"(나는 당신이 가져가 상태를 가지고 뭔가 검사하는 같은데요 ) :active과 :hover을 선택하십시오 :hover당신은 황금해야 우리합니다 .

---

나는 같은 문제가 있지만 Firebug로 Firefox에서 호버 개체를 검사 할 수 없지만 Safari의 Web Inspector가 현재 상태를 고정하고 허용한다는 것을 발견했습니다. Safari의 웹 속성을 활성화하려는 터미널에 다음 줄을 입력하고 Safari를 다시 시작하십시오.

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

브라우저에서 마우스 오버 요소를 활성화 한 다음 마우스 오른쪽 버튼을 클릭하고 '요소 검사'를 선택합니다. 페이지가 현재 상태로 고정되어 개체를 마음의 내용으로 검사 할 수 있습니다.

---

방화범에는 완벽한 솔루션 (마우스 오버 / 호버 시뮬레이션 효과)

그러나 방화범에서 호버 상태를 편집하는 몇 가지 방법이 있습니다.

1. :active상태와 함께 추가:hover

   a:hover, a:active { ... }

   요소 위에 마우스를 끌어다 놓으면 활성 상태로 유지됩니다.

2. 턴 :hover에 상태를 .hover클래스

   소스 파일 (Firebug의 스타일 탭)을 클릭하여 CSS 규칙을 편집 할 수 있습니다.

   그런 다음 .hover요소 에서 클래스를 추가 (및 제거)합니다 .

---

나는 종종 호버링 된 이벤트를 "고정"에서 사용하도록 대체 CSS 또는 자바 펼치기를 만듭니다. Firebug로 완벽하게 조정하고 호버를 제자리에 많이.

---

예, 마우스 오버 상태를 트리거 할 때 "요소 검사"를 마우스 오른쪽 버튼으로 클릭 할 수 있습니다. 이것은 Firebug와 WebKit에서 저에게 맞는군요.

---

이 게시물이 조금 오래 예는 것을 Google에서 제시하는 것을 위해 마우스를 이동하여 HTML / CSS 레이아웃을 만들 수있는 크로스 브라우저 도구를 만들었습니다. 마우스 오버 상태에서 요소를 쉽게 볼 수 있습니다.

HTML 상자 전국 도우미 -GitHub

---

최신 Firefox 버전 (최소 v57 이상)에서는 검사자의 UI가 다른 답변이 게시 될 때와 약간의 묻습니다. 요소 의 :active/ :hover/ :focus상태 를 활성화하고 고정 비용 요소를 검사하고 (오른쪽 클릭-> 요소 검사) 검사기에서 다음을 클릭합니다.

결과 :

출처 (이미지는 CC-BY-SA v2.5, The Mozilla Contributors에 따라 부여됨)

참고 URL : https://stackoverflow.com/questions/1080803/how-to-debug-css-javascript-hover-issues