jQuery로 요소 위를 맴도는 IF 탐지

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 element max와 일치할 경우에만 작동합니다.자세한 내용은 편집 3 참조)

.

Edit 1 (2013년 6월 29일): (jQuery 1.9.x에만 해당, 1.10+에서 작동하므로 다음 Edit 2 참조)

이 답변은 질문에 대한 답변 당시 최고의 해결책이었습니다.이 ':hover' 셀렉터는 다음과 함께 제거되었습니다..hover()jQuery 1.9.x에서 메서드 제거.

흥미롭게도 "allicarn"이 최근에 한 대답은 사용이 가능하다는 것을 보여줍니다.:hoverCSS 셀렉터(vs)로서선택기로 접두사를 붙이면 지글지글)$($(this).selector + ":hover").length > 0, 효과가 있는 것 같습니다!

또한 다른 답변에 언급된 hoverIntent 플러그인도 매우 좋아 보입니다.

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

제가 원래 게시했던 방식을 본 또 다른 댓글을 토대로,.is(":hover"), 사실 jQuery에서 아직도 일하고 있어요.

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

2. 1.9.1.에 작동이 멈췄고, 누군가 나에게 보고했을 때, 그리고 우리는 모두 그것이 jQuery가 그것을 제거하는 것과 관련이 있다고 생각했습니다.hover해당 버전의 이벤트 처리에 대한 별칭입니다.

3. jQuery 1.10.1과 2.0.2(아마도 2.0.x)에서 다시 작동했는데, 이는 1.9.x의 장애가 이전 시점에서 생각했던 것처럼 의도적인 동작이 아니었거나 버그였기 때문임을 시사합니다.

이를 특정 jQuery 버전에서 테스트하려면 이 답변의 처음에 JSFidle 예제를 열고 원하는 jQuery 버전으로 변경한 후 "Run"을 클릭하면 됩니다.호버에서 색상이 바뀌면 작동합니다.

.

편집 3 (2014년 3월 9일):jQuery 시퀀스에 단일 요소가 포함된 경우에만 작동합니다.

@Wilmer가 댓글로 보여준 것처럼, 그는 jQuery 버전에 대해서도 작동하지 않는 피들을 가지고 있고 여기 있는 다른 사람들도 그것을 테스트했습니다.제가 그의 사건에 대해 특별한 점이 무엇인지 찾으려 했을 때, 저는 그가 여러 요소를 한 번에 확인하려고 한다는 것을 알아차렸습니다.이거 던지더라고요.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;

또한 원래 선택기가 하나의 요소만 일치하는 경우 또는 호출한 경우와 같이 단일 요소를 포함하는 jQuery 시퀀스에서도 작동합니다..first()결과 등에 관하여

이것은 또한 나의 자바스크립트 + 웹 개발 팁 & 리소스 뉴스레터에서도 참조할 수 있습니다.

용도:

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/

JQuery 2.x에서 수락된 답변이 제게 맞지 않았습니다..is(":hover")모든 호출에 대해 false를 반환합니다.

결국 다음과 같은 효과가 있는 간단한 솔루션을 사용하게 되었습니다.

function isHovered(selector) {

    return $(selector+":hover").length > 0

}

호버에 플래그 설정:

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.fn.mouseIsOver = function () {
    if($(this[0]).is(":hover"))
    {
        return true;
    }
    return false;
}; 

다음과 같이 사용:

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

Forked the fiddle: http://jsfiddle.net/cgWdF/1/

첫 반응은 좋은데 저한테는 이상합니다.마우스의 페이지 로드 직후를 확인하려고 할 때, 마우스가 작동하려면 최소 500밀리초 이상의 지연 시간을 두어야 합니다.

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

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

https://api.jquery.com/hover/

38행의 비동기 함수:

$( ".class#id" ).hover(function() {
  Your javascript
});

키나쿠타의 답에 따라 깃발을 설정하는 것은 합리적인 것 같습니다. 듣는 사람을 몸에 올려 특정 순간에 떠다니는 요소가 있는지 확인할 수 있습니다.

그러나 하위 노드를 어떻게 처리하길 원하십니까?요소가 현재 맴도는 요소의 상위 요소인지 확인해야 합니다.

<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>

There're so many ways this can be achieved. I personally don't like styling elements directly, I'd rather add the style from css, makes things easier when trying to override or change them.

<style type="text/css">.red-bg { background: red; }</style>

$('#my_element').hover(function() {
    $(this).parent().toggleClass('red-bg');
});

오어

$('#my_element').hover(function() {
    $(this).parent().addClass('red-bg');
}, function() {
    $(this).parent().removeClass('red-bg');
});

또는 마우스 입력 및 마우스 이탈을 사용합니다.

$(document).on('mouseenter', '#my_element', function() {
    $(this).parent().addClass('red-bg');
});

$(document).on('mouseenter', '#my_element', function() {
    $(this).parent().removeClass('red-bg');
});

언급URL : https://stackoverflow.com/questions/8981463/detect-if-hovering-over-element-with-jquery