div가 포함 된 요소에 영향을주지 않고 투명 div 위로 마우스를 올리면 추적 할 수 있습니까?

Question

나는

내가 마우스가

나는이 투명 DIV 그것이 수있는 페이지에있는 모든 요소에 영향을 미칠 싶지 않아 가리킬 여부를 추적 할 페이지에 100 픽셀 X 100 픽셀 투명 사업부를 배치 할 즉, 해당 요소에 붙어있을 수있는 마우스 오버/클릭 이벤트를 방지하는 것 (어떤 요소가있을 경우 해당 요소에 어떤 이벤트가 첨부되는지 알 수있는 방법이 없습니다).

javascript/jQuery를 사용하면 가능합니까?

Answer 1

div의 요소를 마우스로 가리키면 이벤트가 트리거되지 않지만 마우스를 투명 div로 추적하고 싶습니까? 어떻게 그것을 추적하고 싶습니까? 아마도 CSS (z-index)로 할 수있을 것 같은데. 아마도 jquery 문서에도 이벤트가있을 수 있습니다. 어쩌면

#myDiv 
{ 
    Z-index:1000; 
} 

#myDiv:hover 
{ 
    Background-color:red; 
} 

#underDiv 
{ 
    Z-index:1; 
} 

Answer 2

필요한 브라우저 지원의 수준에 따라 아래 CSS, 당신은 (단지 IE 11에서 지원을 유의 documentation)에 CSS 속성 pointer-events을 고려해 볼 수 있습니다 : 브라우저에서

.transparent-div { 
    pointer-events: none; 
} 

Answer 3

지원하는/CSS pointer-events을 구현하면 포인터의 동작이 본질적으로 요소를 '통과'하도록 허용하기 위해 속성을 none으로 설정할 수 있습니다. CSS를 가진

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul> 
<img src="http://placekitten.com/300/300" /> 

:

ul { 
    width: 300px; 
    height: 300px; 
    margin: 0; 
    padding: 0; 
} 

li { 
    margin: 0; 
    padding: 0; 
    height: 100px; 
} 

li:nth-child(odd) { 
    background-color: #ccc; 
} 

img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0.3; 
    pointer-events: none; 
} 

와 jQuery를 예를 들어

$('li').click(function(){ 
    console.log(this.textContent); 
}); 

JS Fiddle demo은 (크롬 31/윈 XP에서 만 테스트).

클릭 이벤트는 절대 위치 이미지 아래의 li 요소에서 발생합니다. 같은 HTML 및 CSS와

다음 jQuery를 또한 hover() 방법을 사용할 수 있도록 허용 :

$('li').hover(function(){ 
    console.log(this.textContent); 
}); 

JS Fiddle demo

참고 :

• pointer-events compatibility (caniuse.com).
• pointer-events (MDN).
• pointer-events (W3C).