호버링 할 때 호출 할 동작을 찾고 있지 않지만 요소가 현재 호버링 되어 있는지 알 수 있는 방법을 찾고 있습니다. 예를 들어 :
$('#elem').mouseIsOver(); // returns true or false
이것을 달성하는 jQuery 메소드가 있습니까?
답변
독창적이고 정확한 답변 :
is()
선택기를 사용 하고 확인할 수 있습니다 :hover
.
var isHovered = $('#elem').is(":hover"); // returns true or false
예 : http://jsfiddle.net/Meligy/2kyaJ/3/
(선택기가 ONE 요소 최대 값과 일치하는 경우에만 작동합니다. 자세한 내용은 편집 3 참조)
.
편집 1 (2013 년 6 월 29 일) : (jQuery 1.9.x에만 해당, 1.10 이상에서 작동하므로 다음 편집 2 참조)
이 답변은 질문에 답변 할 당시 가장 좋은 해결책이었습니다. 이 ‘: hover’선택기는 .hover()
jQuery 1.9.x 의 메소드 제거로 제거되었습니다.
흥미롭게도 “allicarn”의 최근 답변은 :hover
selector 접두사로 CSS 선택기 (vs. Sizzle)로 사용할 수 $($(this).selector + ":hover").length > 0
있으며 작동하는 것 같습니다!
또한 다른 답변에서 언급 한 hoverIntent 플러그인도 매우 좋습니다.
편집 2 (2013 년 9 월 21 일) : .is(":hover")
작품
다른 의견을 바탕으로, 내가 게시 한 원래의 방법은 .is(":hover")
실제로 jQuery에서도 여전히 작동 한다는 것을 알았습니다 .
-
jQuery 1.7.x에서 작동했습니다.
-
누군가가 나에게보고했을 때 1.9.1에서 작동을 멈추었고 우리는 모두
hover
해당 버전에서 이벤트 처리를 위해 별칭을 제거하는 jQuery와 관련이 있다고 생각했습니다 . -
jQuery 1.10.1 및 2.0.2 (아마도 2.0.x)에서 다시 작동했습니다. 이는 1.9.x의 실패가 버그이거나 이전 시점에서 생각한 의도적 인 행동이 아님을 나타냅니다.
특정 jQuery 버전에서이를 테스트하려면이 답변의 시작 부분에서 JSFidlle 예제를 열고 원하는 jQuery 버전으로 변경 한 후 “실행”을 클릭하십시오. 호버에서 색상이 변경되면 작동합니다.
.
편집 3 (2014 년 3 월 9 일) : jQuery 시퀀스에 단일 요소가 포함 된 경우에만 작동합니다.
주석에서 @Wilmer에 의해 표시된 것처럼, 그는 jQuery 버전 I에 대해서는 작동하지 않는 바이올린을 가지고 있으며 여기의 다른 사람들은 그것을 테스트했습니다. 그의 사건에 대해 특별한 것을 찾으려고 할 때 한 번에 여러 요소를 확인하려고한다는 것을 알았습니다. 이것은 던지고 있었다 Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover
.
따라서 그의 바이올린을 사용하면 작동하지 않습니다 .
var isHovered = !!$('#up, #down').filter(":hover").length;
이것이 작동 하는 동안 :
var isHovered = !!$('#up,#down').
filter(function() { return $(this).is(":hover"); }).length;
또한 원래 선택기가 하나의 요소와 일치하거나 .first()
결과 를 호출 한 경우와 같이 단일 요소가 포함 된 jQuery 시퀀스에서도 작동합니다 .
이것은 또한 JavaScript + Web Dev Tips & Resources Newsletter 에서 참조됩니다 .
답변
사용하다:
var hovered = $("#parent").find("#element:hover").length;
jQuery 1.9 이상
답변
jQuery 1.9에서는 작동하지 않습니다. 이 플러그인은 user2444818의 답변을 기반으로 만들었습니다.
jQuery.fn.mouseIsOver = function () {
return $(this).parent().find($(this).selector + ":hover").length > 0;
};
답변
호버에 플래그를 설정하십시오.
var over = false;
$('#elem').hover(function() {
over = true;
},
function () {
over = false;
});
그런 다음 깃발을 확인하십시오.
답변
이 주제에 대해 잠시 작업 한 후 추가 할 몇 가지 업데이트 :
- jQuery 1.9.1에서 .is ( “: hover”)가있는 모든 솔루션이 중단됩니다.
- 마우스가 여전히 요소 위에 있는지 확인하는 가장 큰 이유는 서로 이벤트가 발생하지 않도록하기위한 것입니다. 예를 들어, 마우스 엔터 이벤트가 완료되기 전에 마우스 리브가 트리거되고 완료되는 데 문제가있었습니다. 물론 이것은 빠른 마우스 움직임 때문이었습니다.
우리는 우리 를 위해 문제를 해결하기 위해 hoverIntent https://github.com/briancherne/jquery-hoverIntent 를 사용했습니다 . 기본적으로 마우스 움직임이 더 의도적 인 경우 트리거됩니다. (한 가지 주목해야 할 점은 마우스가 요소를 입력하고 떠날 때 모두 트리거한다는 것입니다. 생성자를 빈 함수로 한 번만 사용하려는 경우)
답변
모든 호버링 된 요소에서 엘먼트를 필터링 할 수 있습니다. 문제가있는 코드 :
element.filter(':hover')
코드 저장 :
jQuery(':hover').filter(element)
부울을 리턴하려면 다음을 수행하십시오.
jQuery(':hover').filter(element).length===0
답변
JQuery 2.x에서 허용 된 답변이 작동하지 않았습니다
.is(":hover")
. 모든 호출에서 false를 반환합니다.
나는 작동하는 매우 간단한 솔루션으로 끝났습니다.
function isHovered(selector) {
return $(selector+":hover").length > 0
}