호버 요소를 "검사"하시겠습니까?

참고 : 비슷한 스레드를 읽었지만 내 문제는 없습니다. 마우스 오른쪽 버튼으로 클릭하면 사라집니다.

Chrome에서 "Inspect Element"는 매우 귀중한 도구입니다.하지만 최근에 많은 분들이 이미 가지고있는 마법사 방식을 배우면서 탐색 표시 줄에 요소에 대한 하위 메뉴를 만드는 것을 보았습니다. 상위 항목.

팝업 (또는 아래)은 내가 원하는 스타일이 아니므로 마우스 오른쪽 버튼을 클릭> 요소를 검사하여 정확히 어디에서 오는지 확인하고 원하는 효과를 얻는 방법에 대한 더 나은 아이디어를 얻습니다.

그러나 마우스를 메뉴에서 멀어 지 자마자 사라집니다.

따라서 검사 창에서 다른 요소를 선택할 수없고 동시에 강조 표시되는 영역을 볼 수 없습니다.

이 문제를 해결할 수있는 방법이 있습니까? 메뉴를 변경하지 않고 활성화되면 "팝업"상태로 유지됩니까?

경우 hover효과가 함께 제공됩니다 CSS다음 네, 일반적으로이를 얻기 위해 두 가지 옵션을 사용 :

하나에 see하는 hover effect마우스가 떠날 때 hover area:
도킹 창을 열고 관리자 및 범위 당신을 때까지 폭을 증가 HTML element, 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴는 관리자 영역 이상이어야합니다 ... 당신은 관리자보기 위로 마우스를 이동할 때 , hover effect문서에서 계속 활성화됩니다.

두에 마우스가 이상없는 경우에도 ,로 이동 관리자를 엽니 말한다 오른쪽 상단 아이콘을 클릭 하면이 수동으로 활성화 할 수 있습니다 (화살표와 점선 사각형) ... (다른 사람의 사이에서)을 가진 확인란이 제공됩니다.keephover effectHTML elementStyles TABToggle Element StateHover Event

명확하지 않은 경우 알려 주시면 스크린 샷을 몇 개 추가해 드리겠습니다. 수정 됨 : 스크린 샷이 추가되었습니다.

그리고 마지막으로 처음에 말했듯이, ... hover로 설정된 경우에만이 작업을 수행 할 수 있습니다. 예를 들어 with 를 CSS:HOVER제어 할 때 (때로는) 메서드 One 만 작동합니다.hover statejQuery.onMouseOver

도움이되기를 바랍니다.

hover가 JS에 의해 트리거되는 경우 키보드를 통해 스크립트 실행을 일시 중지하십시오. 이것은 다른 답변이 제안 하는 것 보다 훨씬 간단한 DOM 동결 방법입니다.

Chrome에서 수행하는 방법은 다음과 같습니다. Firefox에 동등한 절차가 있다고 확신합니다.

1. 개발자 도구를 열고 소스로 이동하십시오.

2. 스크립트 실행을 일시 중지하는 단축키에 유의하십시오 F8.

   

3. UI와 상호 작용하여 요소를 표시합니다.

4. 을 누르십시오 F8.
5. 이제 마우스를 움직이고 DOM을 검사 할 수 있습니다. 요소는 그대로 유지됩니다.

나를 위해 일한 것은 내가 검사하고 싶은 특정 태그를 선택하고 이렇게하는 것입니다.

위의 작업을 수행 한 후 일반적으로 태그를 다시 선택하면 Inspect Element 등과 같은 다른 위치로 마우스를 가져가도 드롭 다운이 자동으로 그대로 유지됩니다.

메뉴 드롭 다운 요소를 검사 할 때 브라우저를 새로 고침하여 정상 상태로 돌아갈 수 있습니다.

도움이 되었기를 바랍니다. :)

자바 스크립트 콘솔에서도이 작업을 수행 할 수 있습니다.

$('#foo').trigger('mouseover');

"hover"상태에서 요소를 "고정"합니다.

Chrome에서 CSS 변경이나 JS 일시 중지없이 수행하는 방법은 다음과 같습니다 (Mac에 있으며 Win에서 실행중인 경우 PC가 없습니다).

1. 개발자 콘솔을 엽니 다.
2. 아직 호버 검사 도구를 활성화하지 말고 대신 마우스를 그 위로 이동하여 원하는 하위 메뉴를 엽니 다.
3. Command+ Shift+ C(Mac) 또는 Ctrl+ Shift+ C(Win / Linux) 누르기

이제 호버 검사 도구가 하위 탐색에서 연 요소에 적용됩니다.

이전 브라우저 개정판에 있는지 확실하지 않지만 방금이 매우 간단한 방법을 발견했습니다.

Chrome 또는 Firefox에서 인스펙터를 열고 관심있는 요소를 마우스 오른쪽 버튼으로 클릭 한 다음 적절한 옵션을 선택합니다 (이 경우 : 마우스 오버). 그러면 관련 CSS가 트리거됩니다.

Firefox 55 및 chromium 61의 스크린 샷.

훌륭한 물건!

그 조언에 대해 gmo에 감사드립니다. 이러한 속성 설정이 크게 도움이되는지 몰랐습니다.

문구를 약간 수정하여 다음과 같이 그 과정을 설명하겠습니다.

• 스타일을 지정할 요소를 마우스 오른쪽 버튼으로 클릭하십시오.

  • '검사'도구 열기

  • 오른쪽에서 작은 스타일 탭으로 이동합니다.

  • CSS 스타일 시트 콘텐츠 위에 있습니다.

  • .hov 옵션 선택-선택한 HTML 요소에 사용할 수있는 모든 설정을 제공합니다.

  • 클릭하고 모든 옵션을 비활성화하도록 변경

  • 이제 조정하려는 상태를 선택하십시오. 이러한 항목을 활성화하면 스타일 시트가 해당 설정으로 바로 이동합니다.

스타일-필터 조정-인터랙티브 요소

이 정보는 저에게 생명의 은인이었습니다. 방금 들어 본 적이 있다는 것을 믿을 수 없습니다!

작업하는 동안 메뉴를 숨기는 속성이 적용되지 않도록 CSS를 변경하십시오.

이 작업을 수행해야했지만 검사하려는 요소가 다른 요소의 호버 상태에 따라 동적으로 추가 및 제거되었습니다. 내 솔루션과 유사 이 하나 , 그러나 그것은 아주 나를 위해 작동하지 않았다.

그래서 내가 한 일은 다음과 같습니다.

1. mouseover관심있는 호버 이벤트를 트리거하는 요소 에 디버거 모드로 들어가는 간단한 스크립트를 추가하십시오 .

$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
  debugger;
});

2. 그런 다음 Chrome에서 개발 콘솔을 열고 요소 위로 마우스를 가져 가면 디버거 모드로 들어갑니다. 개발 도구의 소스 섹션으로 이동하여 "스크립트 실행 다시 시작"버튼 (아래의 파란색 재생 버튼)을 클릭합니다.

그렇게하면 DOM이 hover 상태에서 일시 중지되고 요소 검사기를 사용하여 해당 상태에있는 모든 요소를 ​​검사 할 수 있습니다.