내가 누락 된 jQuery 에서이 작업을 수행하는 빠르고 쉬운 방법이 있습니까?

이미 다른 용도로 사용하고 있기 때문에 mouseover 이벤트를 사용하고 싶지 않습니다. 마우스가 주어진 순간에 요소 위에 있는지 알아야합니다.

"IsMouseOver"함수 만있는 경우 다음과 같은 작업을 수행하고 싶습니다.

function hideTip(oi) {
    setTimeout(function() { if (!IsMouseOver(oi)) $(oi).fadeOut(); }, 100);
}

마우스 아웃 시간 초과를 페이드 아웃하도록 설정하고 반환 값을 객체의 데이터에 저장합니다. 그런 다음 onmouseover에서 데이터에 값이 있으면 시간 초과를 취소하십시오.

페이드 아웃의 콜백 데이터를 제거하십시오.

어린이가 마우스 오버 / 마우스 아웃을 할 때 메뉴에 대해 실행되지 않기 때문에 실제로 마우스 입력 / 마우스 레이브를 사용하는 것이 저렴합니다.

이 코드 는 해리 와 내가 말하려는 행복한 시간을 보여줍니다 . 마우스가 들어가면 툴팁이 나오고 마우스가 떠날 때 사라지는 지연을 설정합니다. 지연이 트리거되기 전에 마우스가 동일한 요소에 들어가면 이전에 저장 한 데이터를 사용하여 트리거가 해제되기 전에 트리거를 제거합니다.

$("someelement").mouseenter(function(){
    clearTimeout($(this).data('timeoutId'));
    $(this).find(".tooltip").fadeIn("slow");
}).mouseleave(function(){
    var someElement = $(this),
        timeoutId = setTimeout(function(){
            someElement.find(".tooltip").fadeOut("slow");
        }, 650);
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
    someElement.data('timeoutId', timeoutId); 
});

깨끗하고 우아한 호버 확인 :

if ($('#element:hover').length != 0) {
    // do something ;)
}

경고 : is(':hover')jquery 1.8 이상에서는 더 이상 사용되지 않습니다. 해결책 은 이 게시물 을 참조하십시오 .

https://stackoverflow.com/a/6035278/8843 이 대답을 사용 하여 마우스가 요소 위에 있는지 확인하십시오.

$('#test').click(function() {
    if ($('#hello').is(':hover')) {
        alert('hello');
    }
});

jQuery의 hover이벤트를 사용 하여 수동으로 추적 할 수 있습니다.

$(...).hover(
    function() { $.data(this, 'hover', true); },
    function() { $.data(this, 'hover', false); }
).data('hover', false);

if ($(something).data('hover'))
    //Hovered!

나는 좀 더 복잡한 환경과 많은 'mouseenters'와 'mouseleaves'가 제대로 작동하지 않는 솔루션에서 정확히 이와 같은 것을 필요로 했으므로 ismouseover 메소드를 추가하는 작은 jquery 플러그인을 만들었습니다. 그것은 지금까지 꽤 잘 작동했습니다.

//jQuery ismouseover  method
(function($){ 
    $.mlp = {x:0,y:0}; // Mouse Last Position
    function documentHandler(){
        var $current = this === document ? $(this) : $(this).contents();
        $current.mousemove(function(e){jQuery.mlp = {x:e.pageX,y:e.pageY}});
        $current.find("iframe").load(documentHandler);
    }
    $(documentHandler);
    $.fn.ismouseover = function(overThis) {  
        var result = false;
        this.eq(0).each(function() {  
                var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
                var offset = $current.offset();             
                result =    offset.left<=$.mlp.x && offset.left + $current.outerWidth() > $.mlp.x &&
                            offset.top<=$.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
        });  
        return result;
    };  
})(jQuery);

그런 다음 문서의 어느 위치에서나 다음과 같이 호출하면 true 또는 false가 반환됩니다.

$("#player").ismouseover()

IE7 +, Chrome 1+ 및 Firefox 4에서 테스트했으며 제대로 작동합니다.

jQuery에서는 .is ( ': hover')를 사용할 수 있으므로

function IsMouseOver(oi)
{
   return $(oi).is(':hover');
}

이제 OP에서 요청한 기능을 제공하는 가장 간결한 방법입니다.

참고 : 위의 IE8 이하에서는 작동하지 않습니다

IE8에서 작동하는 간결한 대안 (IE9의 IE8 모듈러스를 신뢰할 수있는 경우)은 어디서나 트리거하지 않고 $(...).hover(...)요소 선택기를 알 필요가 없습니다 (이 경우 Ivo의 대답이 더 쉽습니다).

function IsMouseOver(oi)
{
    return oi.length && 
           oi.parent()
             .find(':hover')
             .filter(function(s){return oi[0]==this})
             .length > 0;
}

나는 SLaks의 아이디어를 가져 와서 작은 클래스로 감쌌다 .

function HoverWatcher(selector){
  this.hovering = false;
  var self = this; 

  this.isHoveringOver = function() { 
    return self.hovering; 
  } 

    $(selector).hover(function() { 
      self.hovering = true; 
    }, function() { 
      self.hovering = false; 
    }) 
} 

var box1Watcher = new HoverWatcher('#box1');
var box2Watcher = new HoverWatcher('#box2');



$('#container').click(function() {
  alert("box1.hover = " + box1Watcher.isHoveringOver() +
        ", box2.hover = " + box2Watcher.isHoveringOver());
});

미래의 파인더들에게도 참고하십시오.

이 작업과 더 많은 작업을 수행 할 수있는 jQuery 플러그인을 만들었습니다. 내 플러그인에서 커서가 현재 가리키고있는 모든 요소를 ​​얻으려면 다음을 수행하십시오.

$.cursor("isHover"); // will return jQ object of all elements the cursor is 
                     // currently over & doesn't require timer

내가 언급했듯이, 그것은 또한 당신이 볼 수있는 다른 용도가 많이 있습니다

jsFiddle이 여기에 있습니다.

나는 언급 할 수 없으므로 이것을 답변으로 쓰겠습니다!

CSS 선택기 ": hover"와 호버 이벤트의 차이점을 이해하십시오!

": hover"는 CSS 선택기이며 이와 같이 사용될 때 실제로 이벤트와 함께 제거 $("#elementId").is(":hover")되었지만 jQuery 이벤트 호버와는 아무런 관련이 없습니다.

코드를 작성 $("#elementId:hover")하면 마우스로 가리키면 요소가 선택됩니다. 위의 문장은 순수하고 적절한 CSS 선택 으로이 요소를 선택하면 모든 jQuery 버전에서 작동합니다.

반면에 이벤트 호버는

$("#elementId").hover(
     function() { 
         doSomething(); 
     }
); 

jQuery 웹 사이트의 상태는 실제로 jQuery 1.8로 더 이상 사용되지 않습니다.

이벤트 이름 "hover"가 사용되면 이벤트 서브 시스템은 이벤트 문자열에서이를 "mouseenter mouseleave"로 변환합니다. 이것은 여러 가지 이유로 성가시다.

시맨틱 스 : 호버링은 마우스가 요소에 들어오고 나가는 것과 같지 않으며, 발사 전에 어느 정도의 감속 또는 지연을 의미합니다. 이벤트 이름 : 연결된 처리기에서 반환 한 event.type이 마우스 오버가 아니라 mouseenter 또는 mouseleave입니다. 다른 이벤트는이 작업을 수행하지 않습니다. "호버"이름 선택 : 이름이 "hover"인 이벤트를 첨부하고 .trigger ( "hover")를 사용하여 실행하는 것은 불가능합니다. 문서는 이미이 이름을 "새 코드에 대해 강력히 권장하지 않습니다"라고 부르며, 공식적으로 1.8을 더 이상 사용하지 않고 결국 제거하고 싶습니다.

그들이 사용법을 제거한 이유는 is ( ": hover") 불분명하지만 아, 여전히 위와 같이 사용할 수 있으며 여기에 약간의 해킹이 여전히 있습니다.

(function ($) {
   /** 
    * :hover selector was removed from jQuery 1.8+ and cannot be used with .is(":hover") 
    * but using it in this way it works as :hover is css selector! 
    *
    **/
    $.fn.isMouseOver = function() {
        return $(this).parent().find($(this).selector + ":hover").length > 0;
    };
})(jQuery);

아, 나는 타임 아웃 버전을 다시 언급하지 않을 것입니다. 이 방법 은 많은 복잡성을 초래하고 , 다른 방법이 없다면 나를 위해 믿습니다. 모든 경우의 95 % 에서 다른 방법이 있습니다 !

내가 몇 사람을 도울 수 있기를 바랍니다.

그 레츠 앤디

둘 다 고마워 어떤 시점에서 나는 마우스가 여전히 요소 위에 있는지 감지하려고 노력을 포기해야했습니다. 가능하다는 것을 알고 있지만 달성하기에는 너무 많은 코드가 필요할 수 있습니다.

시간이 조금 걸렸지 만 두 가지 제안을 모두 받아 들일만한 것을 생각해 냈습니다.

다음은 간단하지만 기능적인 예입니다.

$("[HoverHelp]").hover (
    function () {
        var HelpID = "#" + $(this).attr("HoverHelp");
        $(HelpID).css("top", $(this).position().top + 25);
        $(HelpID).css("left", $(this).position().left);
        $(HelpID).attr("fadeout", "false");
        $(HelpID).fadeIn();
    },
    function () {
        var HelpID = "#" + $(this).attr("HoverHelp");
        $(HelpID).attr("fadeout", "true");
        setTimeout(function() { if ($(HelpID).attr("fadeout") == "true") $(HelpID).fadeOut(); }, 100);
    }
);

그런 다음 일부 텍스트 에서이 작업을 수행하려면이 작업을 수행해야합니다.

<div id="tip_TextHelp" style="display: none;">This help text will show up on a mouseover, and fade away 100 milliseconds after a mouseout.</div>

This is a <span class="Help" HoverHelp="tip_TextHelp">mouse over</span> effect.

많은 멋진 CSS와 함께 이것은 매우 멋진 마우스 오버 도움말 툴팁을 허용합니다. 그건 그렇고, 마우스를 움직일 때 도움말이 깜박이는 확인란과 텍스트 사이의 작은 간격으로 인해 마우스 아웃 지연이 필요했습니다. 그러나 이것은 매력처럼 작동합니다. 또한 포커스 / 블러 이벤트와 비슷한 작업을 수행했습니다.

시간 초과가 많이 사용되는 것을 보았지만 이벤트의 맥락에서 다음과 같은 좌표를 볼 수 없습니까? :

function areXYInside(e){  
        var w=e.target.offsetWidth;
        var h=e.target.offsetHeight;
        var x=e.offsetX;
        var y=e.offsetY;
        return !(x<0 || x>=w || y<0 || y>=h);
}

컨텍스트에 따라 areXYInside (e)를 호출하기 전에 (this == e.target)을 확인해야 할 수도 있습니다.

참고-자식 요소로 이동하여 dragLeave 이벤트가 트리거되지 않았 음을 확인하기 위해 dragLeave 핸들러 내 에서이 접근법을 사용하려고합니다. 여전히 부모 요소 안에 있는지 확인하지 않으면 실수로 부모를 떠날 때만 의도 된 조치를 취할 수 있습니다.

편집 : 이것은 좋은 생각이지만 일관되게 작동하지 않습니다. 아마도 약간의 조정이있을 것입니다.

jQuery하위 div에 특정 클래스가 있는지 테스트 할 수 있습니다 . 그런 다음 특정 div 위에 마우스를 올려 놓을 때 해당 클래스를 적용하면 페이지의 다른 요소를 마우스로 가리킬 때에도 마우스가 마우스 위에 있는지 여부를 테스트 할 수 있습니다. 팝업에서 div 사이에 공백이 있었기 때문에 이것을 사용했으며 팝업에서 공백 위로 마우스를 움직일 때가 아니라 팝업에서 옮길 때 팝업을 닫고 싶었습니다. 따라서 콘텐츠 div (팝업이 끝났음)에서 마우스 오버 기능을 호출했지만 콘텐츠 div를 마우스로 가리킬 때만 닫기 기능을 트리거하고 팝업 외부에있었습니다!

$ ( ". pop-up"). mouseover (함수 (e)
    {
    $ (this) .addClass ( "over");
    });

$ ( ". pop-up"). mouseout (함수 (e)
    {
    $ (this) .removeClass ( "over");
    });


$ ( "# mainContent"). mouseover (function (e) {
            if (! $ ( ". expanded"). hasClass ( "over")) {
            Drupal.dhtmlMenu.toggleMenu ($ ( ". expanded"));
        }
    });

이것이 가장 쉬운 방법입니다!

  function(oi) 
  {
   if(!$(oi).is(':hover')){$(oi).fadeOut(100);}
  }

다음은 jquery에 의존하지 않고 기본 DOM matches API를 사용하는 기술입니다 . IE9로 돌아가는 브라우저를 지원하기 위해 공급 업체 접두사를 사용합니다. 자세한 내용 은 caniuse.com의 matchesselector를 참조 하십시오.

먼저 matchesSelector 함수를 다음과 같이 만듭니다.

var matchesSelector = (function(ElementPrototype) {
var fn = ElementPrototype.matches ||
          ElementPrototype.webkitMatchesSelector ||
          ElementPrototype.mozMatchesSelector ||
          ElementPrototype.msMatchesSelector;

return function(element, selector) {
  return fn.call(element, selector);
};

})(Element.prototype);

그런 다음 호버를 감지하려면 다음을 수행하십시오.

var mouseIsOver = matchesSelector(element, ':hover');

나는 당신이 필요할 수있는 모든 세부 사항으로 다른 질문에 이것을 대답했습니다.

감지 요소 jQuery로 가리키면 경우 (기록시의 99 upvotes 있음)

기본적으로 다음과 같은 작업을 수행 할 수 있습니다.

var ishovered = oi.is(":hover");

oi단일 요소를 포함하는 jQuery 객체 인 경우에만 작동합니다 . 일치하는 요소가 여러 개인 경우 각 요소에 적용해야합니다 (예 :

var hoveredItem = !!$('ol>li').filter(function() { return $(this).is(":hover"); });
                  // not .filter(':hover'), as we can't apply :hover on multiple elements

이것은 jQuery 1.7부터 테스트되었습니다.

다음은 마우스가 요소 내부에 있는지 여부를 확인하는 데 도움이되는 기능입니다. 라이브 마우스 관련 EventObject를 가질 수있는 함수를 호출하는 것이 유일한 방법입니다. 이 같은:

$("body").mousemove(function(event){
     element_mouse_is_inside($("#mycontainer", event, true, {});
});

소스 코드는 여기 github 또는 게시물 하단에서 확인할 수 있습니다.

https://github.com/mostafatalebi/ElementsLocator/blob/master/elements_locator.jquery.js

function element_mouse_is_inside  (elementToBeChecked, mouseEvent, with_margin, offset_object)
{
    if(!with_margin)
    {
        with_margin = false;
    }
    if(typeof offset_object !== 'object')
    {
        offset_object = {};
    }
    var elm_offset = elementToBeChecked.offset();
    var element_width = elementToBeChecked.width();
    element_width += parseInt(elementToBeChecked.css("padding-left").replace("px", ""));
    element_width += parseInt(elementToBeChecked.css("padding-right").replace("px", ""));
    var element_height = elementToBeChecked.height();
    element_height += parseInt(elementToBeChecked.css("padding-top").replace("px", ""));
    element_height += parseInt(elementToBeChecked.css("padding-bottom").replace("px", ""));
    if( with_margin)
    {
        element_width += parseInt(elementToBeChecked.css("margin-left").replace("px", ""));
        element_width += parseInt(elementToBeChecked.css("margin-right").replace("px", ""));
        element_height += parseInt(elementToBeChecked.css("margin-top").replace("px", ""));
        element_height += parseInt(elementToBeChecked.css("margin-bottom").replace("px", ""));
    }

    elm_offset.rightBorder = elm_offset.left+element_width;
    elm_offset.bottomBorder = elm_offset.top+element_height;

    if(offset_object.hasOwnProperty("top"))
    {
        elm_offset.top += parseInt(offset_object.top);
    }
    if(offset_object.hasOwnProperty("left"))
    {
        elm_offset.left += parseInt(offset_object.left);
    }
    if(offset_object.hasOwnProperty("bottom"))
    {
        elm_offset.bottomBorder += parseInt(offset_object.bottom);
    }
    if(offset_object.hasOwnProperty("right"))
    {
        elm_offset.rightBorder += parseInt(offset_object.right);
    }
    var mouseX = mouseEvent.pageX;
    var mouseY = mouseEvent.pageY;

    if(  (mouseX > elm_offset.left && mouseX < elm_offset.rightBorder)
        && (mouseY > elm_offset.top && mouseY < elm_offset.bottomBorder) )
    {
        return true;
    }
    else
    {
        return false;
    }
}

'Happytime harry'가 말한 것을 확장하면 .data () jquery 함수를 사용하여 시간 초과 ID를 저장하십시오. 이렇게하면 나중에 동일한 요소에서 'mouseenter'가 트리거 될 때 시간 초과 ID를 매우 쉽게 검색 할 수 있으므로 툴팁이 사라지는 트리거를 제거 할 수 있습니다.

jQuery의 mouseenter 및 mouseleave 이벤트를 사용할 수 있습니다. 마우스가 원하는 영역에 들어갈 때 플래그를 설정하고 영역을 벗어날 때 플래그를 설정 해제 할 수 있습니다.

나는이 주제의 아이디어를 결합하고 이것을 생각해 냈습니다. 하위 메뉴를 표시하거나 숨길 때 유용합니다.

$("#menu_item_a").mouseenter(function(){
   clearTimeout($(this).data('timeoutId'));
   $("#submenu_a").fadeIn("fast");
}).mouseleave(function(){
   var menu_item = $(this);

   var timeoutId = setTimeout(function(){
      if($('#submenu_a').is(':hover'))
      {
        clearTimeout(menu_item.data('timeoutId'));
      }
      else
      {
        $("#submenu_a").fadeOut("fast");
      }
   }, 650);

    menu_item.data('timeoutId', timeoutId); 
});

 $("#submenu_a").mouseleave(function(){
   $(this).fadeOut("fast");
 });

나를 위해 일하는 것 같습니다. 이것이 누군가를 돕기를 바랍니다.

편집 : 이제이 접근법을 실현하는 것이 IE에서 올바르게 작동하지 않습니다.

위의 제안을 사용할 수 없습니다.
왜 내 솔루션을 선호합니까?
이 방법은 사용자가 선택한 요소 위에 마우스가 있는지 확인합니다 .
Mouseenter 및 : hover 는 멋지지만 마우스를 움직일 때만 요소가 마우스 아래로 움직일 때가 아니라 트리거됩니다.
: 호버는 꽤 달콤하지만 ... IE

그래서 나는 이것을한다 :

1. 마우스 x를 저장하고 필요할 때 움직일 때마다 y 위치를 저장합니다.
아니오 2. 쿼리와 일치하는 요소 위에 마우스가 있는지 확인하십시오.

// define mouse x, y variables so they are traced all the time
var mx = 0; //  mouse X position
var my = 0; //  mouse Y position

// update mouse x, y coordinates every time user moves the mouse
$(document).mousemove(function(e){
    mx = e.pageX;
    my = e.pageY;
});

// check is mouse is over an element at any time You need (wrap it in function if You need to)
$("#my_element").each(function(){
    boxX = $(this).offset().left;
    boxY = $(this).offset().top;
    boxW = $(this).innerWidth();
    boxH = $(this).innerHeight();
    if ((boxX <= mx) &&
        (boxX + 1000 >= mx) &&
        (boxY <= my) &&
        (boxY + boxH >= my))
    {
        // mouse is over it so you can for example trigger a mouseenter event
        $(this).trigger("mouseenter");
    }
});

위의 인기 있고 유용한 Arthur Goldsmith 답변에 대한 참고 사항 : IE에서 마우스를 한 요소에서 다른 요소로 옮기는 경우 (적어도 IE 9까지) 새 요소에 투명한 배경 (기본적으로). 내 해결 방법은 새 요소에 투명한 배경 이미지를 제공하는 것이 었습니다.

$(document).hover(function(e) {
    alert(e.type === 'mouseenter' ? 'enter' : 'leave');
});

깡깡이

is(':visible');jquery에서 사용할 수 있으며 $ ( '. item : hover')의 경우 Jquery에서도 작동합니다.

이것은 htm 코드 스 니펫입니다.

    <li class="item-109 deeper parent">
<a class="root" href="/Comsopolis/index.php/matiers"><span>Matiers</span></a>
<ul>
<li class="item-110 noAff">
<a class=" item sousMenu" href="/Comsopolis/index.php/matiers/tsdi">
<span>Tsdi</span>
</a>
</li>
<li class="item-111 noAff">
<a class="item" href="/Comsopolis/index.php/matiers/reseaux">
<span>Réseaux</span>
</a>
</li>
</ul>
</li>

그리고 이것은 JS 코드입니다.

$('.menutop > li').hover(function() {//,.menutop li ul

    $(this).find('ul').show('fast');

},function() {
    if($(this).find('ul').is(':hover'))
    $(this).hide('fast');

});

 $('.root + ul').mouseleave(function() {
    if($(this).is(':visible'))
    $(this).hide('fast');

});

이 내가 말한 것 :)