보이지 않는 요소는 마우스 이벤트를받지 못합니다.

Question

시트 커버의 색상을 지정할 수있는 사이트의 jquery에 견본 선택 도구를 쓰고 있습니다. 선택기는 미리보기 이미지 격자로 구성되어 있으며 사용자가 각 미리보기 이미지 위에 마우스를 올려 놓으면 맨 위에 더 큰 이미지가 표시됩니다.

이제 문제는 클라이언트가 부분적으로 또는 전체적으로 큰 이미지에 의해 가려진 이미지가 여전히 이벤트에 응답하기를 원합니다.

이 문제에 대한 해결책은 더 큰 그림을 Z- 색인 5로 목록에 표시하기위한 미리보기 요소를 추가하는 것입니다. 그런 다음 견본 목록의 원래 요소 집합을 복제하여 보이지 않는 것으로 겹칩니다. 결과적으로 기본 요소에는 이벤트가 첨부되지 않지만 부분적으로 불분명 한 요소는 마우스 이벤트에 응답하는 것처럼 보입니다. 이벤트는 실제로 미리보기 요소 앞에있는 보이지 않는 요소에 연결됩니다 (나는 이해할 수 있기를 바랍니다!).

이 효과를 얻으려는 시도의 첫 번째 시도는 복제 된 요소가 숨겨진 CSS 스타일을 볼 수있게하는 것이지만 마우스 이벤트에는 응답하지 않습니다. 배경이 빈 요소를 사용하여 시도 : 대신 투명하고이 잘 작동하는 것 같았지만 IE9에서 테스트 이러한 요소를 마우스 이벤트에 응답하지 않는 것으로 나타났습니다!

배경을 제거하면 작동하게 할 수 있습니다 : 오버레이 요소의 투명 스타일, 물론 지금은 모든 것들이 모호합니다.

지금까지이 문제가있는 IE9 인 것으로 보입니다. IE8은 투명한 항목에 대한 이벤트를 발생시키는 것처럼 보였습니다. 또한 FireFox 및 Chrome에서 의도 한대로 작동하는 것으로 보입니다.

Answer 1

결국 솔루션은 매우 간단했습니다.

background-color: white; 
opacity: 0; 
filter: alpha(opacity=0); /* for old IE versions */ 

이 보이지 않는,하지만 여전히 마우스 이벤트에 반응 요소를 잎 : 필요했던 모든 것은 눈에 보이지 않는 요소를 다음과 같은 스타일을 제공하는 것이 었습니다.

Answer 2

마우스 바인딩이 뒤쪽 이미지에 바인딩되고 아웃이 앞면 이미지에 바인딩되는 이중 바인딩 기술을 사용합니다. 그것은 당신이 뒤의 이미지가 날아들 때까지 정면의 이미지를 숨길 수있게한다.

// use $.fn.each so that each thumb gets its own timer. 
$(".thumb-behind").each(function(){ 
    var timer; 
    $(this).hover(function(){ 
    $(this).next().stop(true,true).fadeIn(); 
    },function(){ 
    timer = setTimeout(function(){ 
     $(this).next().stop(true,true).fadeOut(); 
    },10); 
    }); 

    $(this).next().hover(function(){ 
    clearTimeout(timer); 
    },function(){ 
    $(this).stop(true,true).fadeOut(); 
    }); 
}); 

$ (this) .next()를 수정하여 현재 축소판을 기준으로 더 큰 축소판을 선택했는지 확인하십시오.