요소가 마우스 아래에서 프로그래밍 방식으로 움직일 때 jQuery 호버가 트리거되지 않음

Question

호버 효과가있는 이미지가 있습니다 (마우스를 올려 놓으면 불투명도가 높아짐). 마우스가 움직일 때 원하는대로 작동합니다.

그러나 이미지 자체가 움직입니다 (주기적으로 CSS 속성 상단을 변경하고 있습니다). 마우스가 움직이지 않고 이미지가 마우스 커서 아래로 이동하면 관련 이벤트가 트리거되지 않습니다. 즉, 호버 기능은 호출되지 않습니다. 나는 또한 mouseenter와 mouseleave 이벤트를 대신 사용하려고 시도했으나 작동하지 않습니다.

원하는 동작을 얻으려면 좋은 방법이 될 것입니다. 왜 마우스가 이미지 위에있을 때마다 마우스를 올리면 가져 가야합니까?

Answer 1

마우스가 움직이지 않으면 마우스 이벤트를 트리거 할 수 없지만 이미지가 움직일 때 마우스가있는 위치를 확인할 수는 있습니다. 당신이해야 할 일은 전역 변수에서 마우스 위치를 추적하고 움직일 때 그 위치가 이미지 안에 있는지 확인합니다. 당신이를 만들 수 위치에 http://api.jquery.com/position/

: 당신이 jQuery를 위치 기능을 사용할 수 있습니다 이미지의 위치를 ​​찾으려면 http://docs.jquery.com/Tutorials:Mouse_Position

:

jQuery를 자신의 라이브러리를 사용하여 작업을 수행하는 방법에 대한 좋은 기사를 가지고 이미지의 높이/너비를 사용하여 이미지에서 전역 마우스 위치가 이미지 범위 내에 있는지 확인하고 이동해야합니다.

이

내가 코드 (BTW 완전히 테스트되지 않은 )를 작성합니다 방법입니다

var mousex = 0; 
var mousey = 0; 

jQuery(document).ready(function(){ 
    $(document).mousemove(function(e){ 
     mousex = e.pageX; 
     mousey = e.pageY; 
    }); 
}) 

img.move(function(){ 
    ...move code... 
    var p = $(this).position(); 
    if(mousex >= p.left && mousex <= p.left + $(this).width 
    && mousey <= p.top && mousey >= p.top + $(this).height) 
    { 
    ...opacity code... 
    } 
}); 

Answer 2

수동으로 마우스가 이미지에있는 경우 이미지가 다음 원하는 이벤트가 발생 이동할 때보고 테스트 할 수

.

Mouse position using jQuery outside of events은 마우스 위치를 추적하는 방법을 보여줍니다. 그런 다음 이미지 오프셋을 찾아서 이미지 내부에 있는지 확인하십시오. 또한

Answer 3

는의와 라이언의 답변을 wajiw하는 당신은 mouseenter을 트리거하고 마우스가 이미지, 당신이 .hover()에 바인딩 어떤 코드 때문에 여전히 실행되지/이상임을 감지로 이벤트를하는 MouseLeave해야

$(".my-image").trigger("mouseenter"); 
$(".my-image").trigger("mouseleave"); 

Answer 4

@wajiw는 훌륭한 솔루션을 게시했지만 안타깝게도 오타가 발생하여 문제를 해결하기 전까지는 제대로 작동하지 않습니다.

다음은 테스트를 거쳐 사용할 수있는 클래스로, 객체가 마우스 아래에 있는지 테스트 할 수 있습니다.

클래스 정의

// keeps track of recent mouse position and provides functionality to check if mouse is over an object 
// useful for when nodes appear underneath the mouse without mouse movement and we need to trigger hover 
// see http://stackoverflow.com/questions/4403518 
function MouseTracker($) { 
    var mouseX, mouseY; 

    $(document).mousemove(function(e) { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
    }); 

    return { 
    isOver: function(node) { 
     var p = $(node).offset(); 
     if (mouseX >= p.left && mouseX <= p.left + $(node).width() 
     && mouseY >= p.top && mouseY <= p.top + $(node).height()) 
     { 
     return true; 
     } 
     return false; 
    } 
    } 
} 

사용 예 도움

var mouseTracker = new MouseTracker(jQuery); 
if (mouseTracker.isOver($('#my-object-in-question'))) { 
    $('#my-object-in-question').trigger("mouseenter"); 
} 

희망.

누구나 원한다면 jQuery 플러그인을 매우 쉽게 만들 수 있습니다. 그냥 줄을 써주면 바로 진행하겠습니다.

매트