마우스가 두 요소 사이를 이동할 때 마우스 오버 효과가 깨집니다.

Question

pixastic 라이브러리를 사용하여 이미지 (표)에 흐림 효과를 추가하고 있습니다. 표의 항목에도 동일한 효과가 적용됩니다 (클래스가있는 요소에 pixastic 흐림 효과가 호출되는 것과 동일한 클래스가 있습니다) &.

그러나 마우스가 요소 사이를 이동할 때 밀리 초 동안 효과가 사라집니다. &이 표시되면 말할 나위없이 끔찍한 것처럼 보입니다.

위 표에서 흐림 효과는 테이블의 세 가지 블라우스 & 테이블에 적용됩니다. 블러 효과는 마우스가 한 요소 (예 : 테이블)에서 다른 요소 (요소)로 이동할 때 (한 순간 만) 중단됩니다. mouseenter/mouseleave 및 mouseover/mouseout - jQuery를 이벤트 두 쌍의가 있습니다

// class .cItemsOnTable is elements which need to be blurred 
$(document.body).on("mouseover", ".cItemsOnTable", function (event) { 
    /* as the blur effect is suppose to simulate eye focus, 
     I use pixasticRevert func. to revert the blur effect 
     on other elements when mouse hovers over elements with 
     class cItemsOnTable */ 
    pixasticRevert(); 
    var modelWearArray = $(".cModelWear"); 
    /* modelWearArray is the other elements which receive blur 
     effect if mouse is not hovering over class cItemsOnTable */ 
    $(modelWearArray).each(function() { 
     $(this).addClass("cBlur"); 
     pixasticBlur(); 
    } 
}).on("mouseleave", ".cItemsOnTable", function (event) { 
    pixasticRevert(); 
    var itemsOnTableArray = $(".cItemsOnTable"); 
    $(itemsOnTableArray).each(function() { 
     $(this).addClass("cBlur"); 
    }); 
    pixasticBlur(); 
}); 

Answer 1

:

여기 내 코드입니다. 문서를 자세히 읽은 다음 필요에 맞는 문서를 선택하십시오. 또한 마우스 오버과 mouseleave을 코드에 섞어서 사용합니다 (어떤 이유로 든 의도적으로 사용하지 않는 한).