jQuery를 사용하여 요소 위로 가져 가면 IF 감지

호버링 할 때 호출 할 동작을 찾고 있지 않지만 요소가 현재 호버링 되어 있는지 알 수 있는 방법을 찾고 있습니다. 예를 들어 :

$('#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"의 최근 답변은 :hoverselector 접두사로 CSS 선택기 (vs. Sizzle)로 사용할 수 $($(this).selector + ":hover").length > 0있으며 작동하는 것 같습니다!

또한 다른 답변에서 언급 한 hoverIntent 플러그인도 매우 좋습니다.

편집 2 (2013 년 9 월 21 일) : .is(":hover") 작품

다른 의견을 바탕으로, 내가 게시 한 원래의 방법은 .is(":hover")실제로 jQuery에서도 여전히 작동 한다는 것을 알았습니다 .

1. jQuery 1.7.x에서 작동했습니다.

2. 누군가가 나에게보고했을 때 1.9.1에서 작동을 멈추었고 우리는 모두 hover해당 버전에서 이벤트 처리를 위해 별칭을 제거하는 jQuery와 관련이 있다고 생각했습니다 .

3. 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;
}; 

http://jsfiddle.net/Wp2v4/1/

호버에 플래그를 설정하십시오.

var over = false;
$('#elem').hover(function() {
  over = true;
},
function () {
  over = false;
});

그런 다음 깃발을 확인하십시오.

이 주제에 대해 잠시 작업 한 후 추가 할 몇 가지 업데이트 :

1. jQuery 1.9.1에서 .is ( ": hover")가있는 모든 솔루션이 중단됩니다.
2. 마우스가 여전히 요소 위에 있는지 확인하는 가장 큰 이유는 서로 이벤트가 발생하지 않도록하기위한 것입니다. 예를 들어, 마우스 엔터 이벤트가 완료되기 전에 마우스 리브가 트리거되고 완료되는 데 문제가있었습니다. 물론 이것은 빠른 마우스 움직임 때문이었습니다.

우리는 우리 를 위해 문제를 해결하기 위해 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

}

@Mohamed의 답변을 확장합니다. 작은 캡슐화를 사용할 수 있습니다

이처럼 :

jQuery.fn.mouseIsOver = function () {
    if($(this[0]).is(":hover"))
    {
        return true;
    }
    return false;
}; 

다음과 같이 사용하십시오.

$("#elem").mouseIsOver();//returns true or false

바이올린을 포크 : http://jsfiddle.net/cgWdF/1/

나는 첫 번째 응답을 좋아하지만 나에게는 이상합니다. 마우스에 대한 페이지로드 직후 확인을 시도 할 때 마우스가 작동하려면 500 밀리 초 이상 지연되어야합니다.

$(window).on('load', function() {
    setTimeout(function() {
        $('img:hover').fadeOut().fadeIn();
    }, 500);
});

http://codepen.io/molokoloco/pen/Grvkx/

kinakuta의 답변 당 플래그를 설정하는 것이 합리적 인 것처럼 보입니다. 특정 순간에 요소가 가리키고 있는지 확인할 수 있도록 리스너를 몸에 둘 수 있습니다.

그러나 자식 노드를 어떻게 처리하고 싶습니까? 요소가 현재 호버링 된 요소의 조상인지 확인해야합니다.

<script>

var isOver = (function() {
  var overElement;
  return {

    // Set the "over" element
    set: function(e) {
      overElement = e.target || e.srcElement;
    },

    // Return the current "over" element
    get: function() {
      return overElement;    
    },

    // Check if element is the current "over" element
    check: function(element) {
      return element == overElement;
    },

    // Check if element is, or an ancestor of, the 
    // current "over" element
    checkAll: function(element) {
      while (overElement.parentNode) {
         if (element == overElement) return true;
         overElement = overElement.parentNode;
      }
      return false;
    }
  };
}());


// Check every second if p0 is being hovered over
window.setInterval( function() {
  var el = document.getElementById('p0');
  document.getElementById('msg').innerHTML = isOver.checkAll(el);
}, 1000);


</script>

<body onmouseover="isOver.set(event);">
  <div>Here is a div
    <p id="p0">Here is a p in the div<span> here is a span in the p</span> foo bar </p>
  </div>
  <div id="msg"></div>
</body>