복붙노트

[JQUERY] jQuery를 함께 요소를 가리키면 경우 감지

JQUERY

jQuery를 함께 요소를 가리키면 경우 감지

해결법


  1. 1.원래 (그리고 수정) 답 :

    원래 (그리고 수정) 답 :

    당신은 ()를 사용하고 셀렉터를 확인할 수 있습니다 가져가 있습니다.

    var isHovered = $('#elem').is(":hover"); // returns true or false
    

    예 : http://jsfiddle.net/Meligy/2kyaJ/3/

    (선택기 ONE 요소 최대 일치하는 경우에만 작동합니다. 참조 편집 3 이상)

    .

    편집 1 (6 월 (29), 2013) : (이 1.10+와 함께 작동으로 jQuery를에 적용 다음 편집 2를 참조 만 1.9.x)

    이 답변은 질문에 대답 당시 최고의 솔루션이었다. 이 '호버 "선택기의 jQuery 1.9.x.에서 .hover () 메소드를 제거하여 제거한

    . 당신이 선택 $ ( ": 호버"$ (이) .selector +)와 접두사 때 CSS 선택기 (대 지글 지글)로 가져가 "allicarn"쇼의 최근 대답 흥미롭게도이 사용 가능 길이> 0, 및 그것은 작동하는 것 같다!

    또한, hoverIntent는 아주 좋은 사항 다른 응답 외모에 언급뿐만 아니라 플러그인이.

    편집 2 (2013 년 9 월 21 일) : 작품 : ( "호버")를 .is는

    : ( "호버")를 실제로 여전히, jQuery를 작동 다른 의견을 바탕으로 내가 게시 된 원래의 방법은, .is는 것으로 나타났습니다.

    특정의 jQuery 버전이 테스트하려면, 그냥 원하는 jQuery를 버전이 답변, 변화의 시작 부분에 JSFidlle 예를 열고 "실행"을 클릭합니다. 색상이 호버에 변경하는 경우, 그것을 작동합니다.

    .

    코멘트에 @Wilmer 수 있듯이, 그는 내가 다른 사람이 여기에 그것을 테스트 jQuery를 버전에 대해도 일을하지 않는 바이올린있다. 나는 그의 사건에 대해 특별한 무엇을 발견했을 때 나는 그가 한 번에 여러 요소를 확인하려고했던 것으로 나타났습니다. 구문 오류, 인식 할 수없는 표현 :이 catch되지 않은 오류를 던지고 지원되지 않는 의사를 : 호버합니다.

    그래서, 그의 바이올린 작업이 작동하지 않습니다 :

    var isHovered = !!$('#up, #down').filter(":hover").length;
    

    이 않습니다 작업하는 동안 :

    var isHovered = !!$('#up,#down').
                        filter(function() { return $(this).is(":hover"); }).length;
    

    또한 원래의 선택은 단 하나 개의 요소를 일치하는 경우처럼, 하나의 요소를 포함 jQuery를 시퀀스와 함께 작동하거나 등의 결과에 좁은 방 ()를 호출하는 경우

    이것은 또한 내 자바 스크립트 + 웹 데브 팁 & 자료 뉴스에서 참조됩니다.


  2. 2.사용하다:

    사용하다:

    var hovered = $("#parent").find("#element:hover").length;
    

    jQuery를 1.9+


  3. 3.그것은 jQuery를 1.9에서 작동하지 않습니다. user2444818의 답변에 따라이 플러그인을했다.

    그것은 jQuery를 1.9에서 작동하지 않습니다. user2444818의 답변에 따라이 플러그인을했다.

    jQuery.fn.mouseIsOver = function () {
        return $(this).parent().find($(this).selector + ":hover").length > 0;
    }; 
    

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


  4. 4.호버에 플래그를 설정합니다 :

    호버에 플래그를 설정합니다 :

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

    그런 다음 당신의 깃발을 확인합니다.


  5. 5.커플 업데이트는 잠시 동안이 주제에 작업 후 추가 :

    커플 업데이트는 잠시 동안이 주제에 작업 후 추가 :

    우리는 우리의 문제를 해결하기 위해 hoverIntent https://github.com/briancherne/jquery-hoverIntent을 사용했다. 마우스 이동이 더 의도적 인 경우 기본적으로는 트리거합니다. (- 당신이 단 하나의 생성자에게 빈 함수를 전달 사용하려면주의 할 점은 요소를 입력하고 떠나 모두 마우스 트리거 것입니다)


  6. 6.당신은 모든 공중 선회 요소에서 요소를 필터링 할 수 있습니다. 문제 코드 :

    당신은 모든 공중 선회 요소에서 요소를 필터링 할 수 있습니다. 문제 코드 :

    element.filter(':hover')
    

    저장 코드 :

    jQuery(':hover').filter(element)
    

    부울 돌아가려면 :

    jQuery(':hover').filter(element).length===0
    

  7. 7.허용 대답은 JQuery와 2.X에 나를 위해 작동하지 않았다 .is는 ( "호버")는 모든 호출에 false를 돌려줍니다.

    허용 대답은 JQuery와 2.X에 나를 위해 작동하지 않았다 .is는 ( "호버")는 모든 호출에 false를 돌려줍니다.

    나는 작품이 꽤 간단한 솔루션으로 돌아가 셨습니다 :

    function isHovered(selector) {
    
        return $(selector+":hover").length > 0
    
    }
    

  8. 8.모하메드의 대답 @에 확장. 당신은 작은 캡슐을 사용할 수 있습니다

    모하메드의 대답 @에 확장. 당신은 작은 캡슐을 사용할 수 있습니다

    이 같이 :

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

    를 같이 사용합니다 :

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

    바이올린을 갈래 : http://jsfiddle.net/cgWdF/1/


  9. 9.나는 첫 번째 응답을 좋아하지만 나를 위해 그것은 이상한입니다. 단지 마우스에 대한 페이지로드 후 확인을 시도 할 때, 나는 일에 그것을 위해 적어도 500 밀리 초 지연에 넣어해야합니다 :

    나는 첫 번째 응답을 좋아하지만 나를 위해 그것은 이상한입니다. 단지 마우스에 대한 페이지로드 후 확인을 시도 할 때, 나는 일에 그것을 위해 적어도 500 밀리 초 지연에 넣어해야합니다 :

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

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


  10. 10.kinakuta의 대답은 당 플래그가 타당 설정, 당신은 모든 요소가 특정 순간에 마우스 커서를 올려 확인한되고 있는지 확인할 수 있도록 몸에 리스너를 넣을 수 있습니다.

    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>
    
  11. from https://stackoverflow.com/questions/8981463/detect-if-hovering-over-element-with-jquery by cc-by-sa and MIT license