클릭 할 수없는 div with position : fixed

position:fixed으로 콘텐츠를 겹치게 할 수 있지만 클릭 할 수없는 div를 만들고 싶습니다. 즉, 해당 div의 영역을 클릭하면 해당 콘텐츠를 클릭하고 있습니다. 따라서 div 아래의 텍스트를 쉽게 선택할 수 있습니다. 그렇게 할 수있는 방법이 있습니까?클릭 할 수없는 div with position : fixed

출처

2011-08-24 Victor Marchuk

'pointer-events : none'이 할 수 있습니다 ... –

해결 방법은 overlaying div의 CSS에 pointer-events: none;을 추가하는 것입니다. 이렇게하면 포인터 이벤트에 대한 모든 이벤트가 오버레이 div를 무시하게됩니다.

여기에 나와 있습니다. http://jsfiddle.net/nayish/7hHvL/.

하단 div에만 설정된 알림은 오버레이 div를 클릭 할 때도 작동합니다.

출처

2011-08-24 21:34:29 Nayish

이것은 훌륭한 해결책입니다! –

IE 10 이상에서는 작동하지 않습니다. http://caniuse.com/pointer-events – Nils

그러나 내년 1 월, 2016 년에 IE 9 및 10은 더 이상 Windows 7 이상에서 지원되지 않습니다 :-) – KajMagnus

당신은 또한 무엇을 클릭되고 있습니다에 전면에 표시됩니다 무엇이든간에 hoverOut

var underlyingDiv = document.getElementById ("div1"); 
var overlyingDiv = document.getElementById ("div2"); 

overlyingDiv.onHoverOver = "underlyingDiv.setCapture"; 
overlyingDiv.onHoverOut = "underlyingDiv.releaseCapture";

출처

2011-08-24 21:25:38 Kasturi

setCapture 메소드는 Internet Explorer에서만 작동합니다. – Wayne

동안 div 및 releaseCapture 고정이의 hoverOver 동안 기본 div에 setCapture을 사용해야 할 수도 있습니다. 이를 처리하는 한 가지 방법은 링크 위에 나타나는 링크에 대해 투명한 그래픽을 작성하고 절대적인 내용의 위치 앞에 투명한 이미지를 표시하는 것입니다. 링크가 알려진 크기의 메뉴 버튼 인 경우 쉽게 수행 할 수 있습니다.

업데이트 예

<a href="#"> 
<img src="transparent.gif" width="100" height="100" style="position:absolute; zindex:100"> 
</a> 
<div style="width:100px; height:100px"> 
this is my menu button 
</div>

지정한 IMG 총수 : 사업부 메뉴 버튼을 통해 현재 화면 위치에서 절대 남아. zindex는 고정 된 내용 앞에 밀어 넣을 것입니다. 은폐 된 링크의 공간을 아는 것이 쉽습니다.

출처

2011-08-24 21:30:54 Wayne

이것은 매우 간단한 문제에 대한 매우 복잡한 해결책처럼 들립니다 ... – Nayish

클릭 할 수없는 div with position : fixed

답변

관련 문제