jQuery 마우스가 요소를 유지하는 경우에만 마우스 오버 기능을 활성화합니다.

StackOverflow https://stackoverflow.com/questions/1666615

문제

활성화하고 싶습니다 .mouseover 마우스가 미리 정해진 지속 시간 (예 : 500 밀리 초)의 "트리거"요소에 내려 놓는 경우에만 작동합니다.

예를 들어

$('.featured').mouseover(function () {
      $('.feat-txt').fadeOut("fast");
    });

마우스가 최소 500 밀리 초 기간 동안 .featured 요소 위에 배치 된 경우에만 함수가 시작될 수 있고 .feat-txt가 사라질 수 있습니다. 해당 요소의 간단한 마우스 (빠른 움직임 만)는 기능을 활성화하지 않습니다.

그렇게하는 방법에 대한 제안이 있습니까?

도움이 되었습니까?

해결책

나는 과거에 호버 의도를 사용해 왔습니다 - 꽤 좋고 당신이 생각한 것을합니다.

http://cherne.net/brian/resources/jquery.hoverintent.html

다른 팁

이렇게하십시오 :

  • 해당 요소의 이벤트를 가로 채 웁니다. 콜백 함수에서 아무것도하지 않습니다. 대신 원하는 지연으로 다른 기능을 호출하십시오.

  • 두 번째 함수에서 마우스가 마우스 좌표와 요소 좌표를 얻을 수있는 jQuery를 사용하여 마우스가 여전히 요소에 있는지 확인하십시오. 마우스가 여전히 존재한다면, 원하는 일을하십시오.

사용자는 마우스를 요소 내부와 뒤로 옮길 수 있기 때문에 긴 지연으로 작동하지 않습니다. 기능 이름이 여전히 발사됩니다.

당신이 내가 말하는 것을 신경 쓰지 않는다면, 이것은 매우 나쁜 생각입니다.

실제로이 jQuery 호버 플러그인도 발견했습니다. http://blog.threedubmedia.com/2008/08/eventspecialhover.html

마우스 오버 대기 시간을 사용하지 않지만 특정 기간 동안 마우스 속도를 사용합니다.

결과는이 페이지의 오른쪽에 표시된 세 상자에서 볼 수 있습니다. http://www.splendida.it (저는 현재 작업 중입니다).

나에게 멋져 보인다. 마우스가 첫 번째 상자에서 세 번째 상자로 빠르게 점프하면 마우스가 두 번째 요소를 통과하더라도 아무 일도 일어나지 않습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top