호버 효과가 기본 요소를 트리거하지 않습니까?

Question

겹쳐진 요소 (정확하게는 이미지)가 있습니다. 맨 위에 있지 않아도 마우스를 올리면 각 호버 효과를 활성화해야합니다. 나는 이것이 꽤 간단해야한다고 생각합니다. 내가 놓친 게 있니?

여기에 jsFiddle이 있습니다. 그 공간이 녹색과 파란색으로 덮여 있어도 만진다면 발사에는 적의 호버 효과가 필요합니다.

#div1, #div2, #div3 { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
#div1 { 
 
    background-color: red; 
 
} 
 
#div2 { 
 
    background-color: green; 
 
    left: 25px; 
 
    top: 25px; 
 
} 
 
#div3 { 
 
    background-color:blue; 
 
    left: 50px; 
 
    top: 50px; 
 
}

<div id="div1" onmouseover="alert('Red Div moused over');"></div> 
 
<div id="div2"></div> 
 
<div id="div3"></div>

은 Mysteryos 언급

Answer 1

만 최상위 요소는 호버 이벤트를 받게됩니다. 여기가이 피들에서 볼 수 있습니다. http://jsfiddle.net/Frfbf/

빨간색 상자와 동일한 크기이지만 다른 항목 위에 놓이는 오버레이 div를 추가 할 수 있습니다. 그런 다음 빨간색 상자 자체가 아니라 마우스 오버 기능을 적용하십시오. 여기에 본 http://jsfiddle.net/yFD2E/1/

#container { 
    position:absolute; 
    width:100px; 
    height:100px; 
    border:2px solid #0f0; 
    overflow:hidden; 
    z-index:2; 
} 
#container:hover{border-color:#f00;} 
#container div{z-index:1;} 

UPDATE : JQuery와 솔루션/시작점 - http://jsfiddle.net/yFD2E/6/

Answer 2

귀하의 지침과 예제는 약간의 모순 : 나는 중복 요소를 가지고

... 그걸 덮어 씌우면 각 호버 효과를 활성화시켜야합니다.

및

녹색 및 파란색으로 덮여 있어도 터치하면 발동하기 위해 빨간색의 호버 효과가 필요합니다.

마우스를 가져 왔을 때 활성화하려면 각 요소 호버 효과가 필요합니까? 아니면 위에 다른 요소가 있어도 하단 요소의 호버가 활성화해야합니까?

전자의 경우 빨강, 녹색 및 파랑의 효과가 세 가지 모두에 공통적으로 적용되는 큰 영역 위로 마우스를 가져 가면 활성화 되나요? 그건 좀 더 까다 롭습니다.

후자 인 경우 상단에있는 겹치는 요소에 pointer-events: none을 사용하면 해당 호버 이벤트를 무시할 수 있습니다. 문제를 해결 http://jsfiddle.net/yFD2E/2/

합니까 : 나는 예로 JSFiddle 업데이트되었습니다 http://caniuse.com/pointer-events

: 그것은 좋은 브라우저를 지원하지 않습니다?