아래 내용에 접근할 수 있도록 중복 디브를 "클릭 불가"로 설정하시겠습니까?

아래 내용에 접근할 수 있도록 중복 디브를 "클릭 불가"로 설정하시겠습니까?

저는 효과에 대해 불투명도가 감소된 JPG 오버레이를 사용하고 있지만, 효과로만 사용하고 해당 div의 아래 내용을 클릭할 수 있도록 하고 싶습니다.가능할까요, 감사합니다 :)

댓글 달아주셔서 감사합니다 여러분.JPEG가 전체 페이지를 다루고 있어서 다른 생각을 해야 할 것 같아요 :)

음, 있습니다.pointer-events:none;다만 몇 개의 브라우저 현대 브라우저(및 IE11)는 이를 지원합니다.

https://developer.mozilla.org/en/CSS/pointer-events

네, 가능합니다.

사용하다pointer-events: noneIE11용 CSS의 조건문과 함께 (IE10 이하에서는 작동하지 않기 때문에) 이를 달성하기 위한 교차 브라우저 호환 솔루션을 얻을 수 있습니다.

사용.AlphaImageLoader, 당신은 심지어 투명하게 넣을 수 있습니다..PNG/.GIF오버레이에서 sdiv클릭을 통해 아래에 있는 요소로 전파됩니다.

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11 조건:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

여기 모든 코드가 포함된 기본 예시 페이지가 있습니다.

아니야.오버레이 요소는 항상 클릭을 가로채게 됩니다.하나의 가능한 해결책은 다음과 같이 묶는 것입니다.click이벤트를 오버레이 요소에 적용한 다음 현재 마우스 위치를 가져와 아래 요소의 위치와 비교하여 해당 요소가 클릭을 등록해야 하는지 여부를 결정합니다.하지만 이를 달성하는 데는 훨씬 더 좋은 방법이 있을 가능성이 높습니다.하지만 당신의 코드를 보지 않고서는 알 방법이 없습니다.

제가 발견한 하나의 간단한 트릭은 비록 매우 w3c는 아니지만, div를 스판으로 캡슐화하고 그 스판 클래스를 사용하여 오버레이를 만드는 것입니다.그렇게 하면 전체가 클릭이 가능해지고 디브는 디브처럼 행동할 것입니다

언급URL : https://stackoverflow.com/questions/7700051/make-overlapping-div-not-clickable-so-that-content-below-can-be-accessed