이 특정 사례에서 마우스 요소를 감지하고 부모 요소를 남기는 방법

Question

이 코드를 사용하여 마우스 오버/마우스 아웃에 이미지 효과를 적용했지만 표시되는 오버레이가 있기 때문에 마우스 오버/아웃이 이미지에 직접 첨부되는 것을 원하지 않습니다. 상단에,

jQuery('.gridfx-img img').each(function(){ 
    this.onmouseout = function(){ 
     var canvas1 = Pixastic.process(this, "desaturate"); 
     canvas1.onmouseover = function(){ 
      Pixastic.revert(this); 
     } 
    } 
    this.onload = function(){ 
     var canvas = Pixastic.process(this, "desaturate"); 
     canvas.onmouseover = function(){ 
      Pixastic.revert(this); 
     } 
    } 
}); 

내가 표적으로하고 요소는 .gridfx-IMG 마우스/입력 내가 코드가 작동하지 않는 것으로 변경 한 경우 그러나두고있다. 이것은 실제 이미지 여야하기 때문입니다. 나는 this.parents()를 시도했다. 아무것도 지금까지 일하지 않았다. 어떤 아이디어?

Answer 1

closest() 메서드는 선택기와 일치하는 노드의 조상을 반환합니다. hover() 메서드는 마우스 입력 이벤트와 마우스 출력 이벤트를 처리하는 두 가지 메서드를 허용합니다.

var container = jQuery('.gridfx-img img').closest(".gridfx-img").hover(
    function onMouseInDo(event){}, 
    function onMouseOutDo(event){}, 
) 

Answer 2

두 가지 옵션이 있습니다. 오버레이에 이벤트를 첨부 한 다음 jQuery 탐색 함수를 사용하여 해당 요소에서 적용 할 하위 이미지까지 탐색 할 수 있습니다.

오버레이의 마우스 이벤트를 끄고 싶을 수도 있습니다. 이렇게하면 롤오버와 클릭 연결이 레이어 및 효과를 내기 원하는 이미지를 통과 할 수 있습니다. jquery 자체가 아니라 CSS로 처리됩니다. 오버레이에 마우스 기능이 있는지 여부에 따라 다릅니다.

로 여기에 특정 사건에 대한

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

#overlay {  
    pointer-events: none; 
}