CSS 포인터 이벤트를 사용하여 Div를 클릭에 영향을 받지 않게 만드는 방법은 무엇입니까?

CSS 포인터 이벤트: 클릭에 영향을 받지 않는 Div 만들기

투명 오버레이 div를 구현할 때 기본 요소와 상호 작용하는 것이 어려워집니다. 오버레이가 클릭 및 기타 마우스 이벤트를 가로채기 때문입니다. 이 문제를 해결하기 위해 CSS 포인터 이벤트 속성을 사용할 수 있습니다.

포인터 이벤트 이해

pointer-events 속성은 특정 요소가 사용자 입력에 응답하는 방식을 제어합니다. . 포인터 이벤트 설정: 없음; 요소의 시각적 모양은 그대로 유지하면서 마우스 이벤트에는 보이지 않게 렌더링합니다.

솔루션 구현

다음 예를 고려하세요.

<code class="html"><div id="container">
    <p>Some text</p>
    <div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
        ... some content ...
    </div>
</div></code>

#overlay div가 클릭에 보이지 않게 하려면 다음 CSS 규칙을 추가하면 됩니다.

<code class="css">#overlay {
  pointer-events: none;
}</code>

이제 마우스 클릭 및 기타 이벤트는 상호 작용을 트리거하지 않고 오버레이 div를 통과합니다.

브라우저 지원

포인터 이벤트는 최신 브라우저에서 지원됩니다.

• Firefox 3.6
• Chrome 2
• IE 11
• Safari 4

크로스 브라우저 해결 방법

안타깝게도 포인터 이벤트에 대한 알려진 크로스 브라우저 해결 방법은 없습니다.

위 내용은 CSS 포인터 이벤트를 사용하여 Div를 클릭에 영향을 받지 않게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!