Czy w jQuery jest szybki i łatwy sposób to zrobić?

Nie chcę używać zdarzenia myszy, ponieważ już go używam do czegoś innego. Muszę tylko wiedzieć, czy myszka znajduje się nad elementem w danym momencie.

Chciałbym zrobić coś takiego, gdyby tylko istniała funkcja „IsMouseOver”:

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

Ustaw limit czasu myszy, aby zanikać i zapisz wartość zwracaną do danych w obiekcie. Następnie po najechaniu myszą anuluj limit czasu, jeśli w danych znajduje się wartość.

Usuń dane po wywołaniu zwrotnym zanikania.

W rzeczywistości korzystanie z mouseenter / mouseleave jest tańsze, ponieważ nie uruchamiają menu, gdy dzieci najeżdżają kursorem myszy / mouseout.

Ten kod ilustruje to, co szczęśliwie Harry i ja próbujemy powiedzieć. Kiedy mysz wchodzi, pojawia się etykietka, kiedy mysz opuszcza, ustawia opóźnienie zniknięcia. Jeśli mysz wejdzie w ten sam element przed wyzwoleniem opóźnienia, to niszczymy spust, zanim zadziała, korzystając z danych, które wcześniej zapisaliśmy.

$("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); 
});

Czysty i elegancki czek w dymku:

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

OSTRZEŻENIE: is(':hover')jest przestarzałe w jquery 1.8+. Zobacz ten post dla rozwiązania.

Możesz także użyć tej odpowiedzi: https://stackoverflow.com/a/6035278/8843, aby przetestować, czy wskaźnik myszy znajduje się nad elementem:

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

Możesz użyć hoverzdarzenia jQuery do ręcznego śledzenia:

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

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

Potrzebowałem czegoś dokładnie takiego (w nieco bardziej złożonym środowisku, a rozwiązanie z wieloma „mouseenters” i „mouseleaves” nie działało poprawnie), więc stworzyłem małą wtyczkę jquery, która dodaje tę metodę. Do tej pory działało całkiem dobrze.

//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);

Następnie w dowolnym miejscu dokumentu nazywaj go tak i zwraca on wartość prawda lub fałsz:

$("#player").ismouseover()

Przetestowałem to na IE7 +, Chrome 1+ i Firefox 4 i działa poprawnie.

W jQuery możesz użyć .is (': hover'), więc

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

byłby teraz najbardziej zwięzłym sposobem zapewnienia funkcji wymaganej w PO.

Uwaga: powyższe nie działa w IE8 lub niższej

Jako mniej zwięzła alternatywa, która działa w IE8 (jeśli mogę zaufać modułowi IE8 IE9), i robi to bez uruchamiania $(...).hover(...)wszędzie, ani nie wymaga znajomości selektora dla elementu (w takim przypadku odpowiedź Ivo jest łatwiejsza):

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

Wziąłem pomysł SLaksa i zawarłem go w małą klasę .

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());
});

TYLKO dla przyszłych odkrywców tego.

Zrobiłem wtyczkę jQuery, która może to zrobić i wiele więcej. W mojej wtyczce, aby uzyskać wszystkie elementy, na których kursor jest obecnie najechany kursorem, po prostu wykonaj następujące czynności:

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

Jak wspomniałem, ma również wiele innych zastosowań, jak widać w

jsFiddle znaleziono tutaj

Ponieważ nie mogę komentować, napiszę to jako odpowiedź!

Proszę zrozumieć różnicę między selektorem css „: hover” a zdarzeniem hover!

„: hover” to selektor css i rzeczywiście został usunięty ze zdarzeniem, gdy jest używany w ten sposób $("#elementId").is(":hover"), ale w sensie oznacza to, że tak naprawdę nie ma nic wspólnego z aktywowaniem zdarzenia jQuery.

jeśli kodujesz $("#elementId:hover"), element zostanie wybrany tylko po najechaniu myszką. powyższa instrukcja będzie działać ze wszystkimi wersjami jQuery, gdy wybierzesz ten element z czystym i zgodnym wyborem css.

Z drugiej strony najechanie kursorem, które jest

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

jest rzeczywiście przestarzałe jako jQuery 1.8 tutaj stan ze strony jQuery:

Gdy używana jest nazwa zdarzenia „hover”, podsystem zdarzeń konwertuje ją na „mouseenteraveleave” w ciągu zdarzeń. Jest to denerwujące z kilku powodów:

Semantyka: Zawieszanie nie jest tym samym, co mysz wchodząca i wychodząca z elementu, oznacza pewne spowolnienie lub opóźnienie przed odpaleniem. Nazwa zdarzenia: Typ event. zwrócony przez dołączony moduł obsługi nie jest najechaniem myszką, ale albo myszką, albo myszką. Żadne inne wydarzenie tego nie robi. Kooptowanie nazwy „najechania”: nie można dołączyć zdarzenia o nazwie „najechanie” i uruchomić go przy użyciu .trigger („najechanie”). Dokumenty już nazywają tę nazwę „zdecydowanie odradzam nowy kod”, chciałbym oficjalnie wycofać go z wersji 1.8 i ostatecznie go usunąć.

Dlaczego usunęli to użycie („: hover”) jest niejasne, ale no cóż, nadal możesz go używać tak jak powyżej i tutaj jest mały hack, aby go nadal używać.

(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);

Aha i nie poleciłbym wersji limitu czasu, ponieważ przynosi to dużo komplikacji , użyj funkcji limitu czasu dla tego rodzaju rzeczy, jeśli nie ma innego wyjścia i uwierz mi, w 95% procent wszystkich przypadków jest inny sposób !

Mam nadzieję, że mógłbym pomóc kilku osobom.

Greetz Andy

Dziękuję wam obu. W pewnym momencie musiałem zrezygnować z próby wykrycia, czy mysz nadal znajduje się nad elementem. Wiem, że jest to możliwe, ale może wymagać zbyt dużo kodu do osiągnięcia.

Zajęło mi to trochę czasu, ale wziąłem obie twoje sugestie i wymyśliłem coś, co zadziałałoby dla mnie.

Oto uproszczony (ale funkcjonalny) przykład:

$("[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);
    }
);

A potem, aby to zadziałało na jakimś tekście, to wszystko, co muszę zrobić:

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

Wraz z dużą ilością fantazyjnych CSS, pozwala to na bardzo ładne podpowiedzi najechania myszką. Nawiasem mówiąc, potrzebowałem opóźnienia w wyciszeniu myszy z powodu niewielkich przerw między polami wyboru i tekstem, które powodowały miganie pomocy podczas przesuwania myszy. Ale to działa jak urok. Zrobiłem też coś podobnego w przypadku zdarzeń skupienia / rozmycia.

Widzę często używane limity czasu, ale czy w kontekście wydarzenia nie możesz spojrzeć na współrzędne, takie jak to ?:

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);
}

W zależności od kontekstu może być konieczne upewnienie się (this == e.target) przed wywołaniem areXYInside (e).

fyi- Patrzę na użycie tego podejścia w module obsługi dragLeave, aby potwierdzić, że zdarzenie dragLeave nie zostało wywołane przez przejście do elementu potomnego. Jeśli w jakiś sposób nie sprawdzisz, czy nadal jesteś w elemencie macierzystym, możesz przez pomyłkę podjąć działanie, które jest przeznaczone tylko wtedy, gdy naprawdę opuścisz rodzica.

EDYCJA: to fajny pomysł, ale nie działa wystarczająco konsekwentnie. Być może z drobnymi poprawkami.

Możesz sprawdzić, jQueryczy jakikolwiek div div ma określoną klasę. Następnie, stosując tę ​​klasę, gdy przesuwasz myszką nad i na zewnątrz określonego elementu div, możesz sprawdzić, czy wskaźnik myszy znajduje się nad nim, nawet gdy najedziesz myszką na inny element na stronie Znacznie mniej kodu w ten sposób. Użyłem tego, ponieważ w wyskakującym okienku miałem odstępy między divami i chciałem zamknąć wyskakujące okienko tylko wtedy, gdy się wyłączyłem, a nie kiedy przesuwałem mysz nad odstępami w wyskakującym okienku. Więc nazywałam funkcję najechania kursorem na div treści (która wyskoczyła po wyskakującym okienku), ale wyzwalałaby ona funkcję zamykania tylko wtedy, gdy najechałem myszą na div treści, ORAZ poza pop-upem!

$ („. pop-up”). mouseover (funkcja (e)
    {
    $ (this) .addClass („over”);
    });

$ („. pop-up”). mouseout (funkcja (e)
    {
    $ (this) .removeClass („over”);
    });


$ („# mainContent”). mouseover (funkcja (e) {
            if (! $ („. expanded”). hasClass („over”)) {
            Drupal.dhtmlMenu.toggleMenu ($ („. Rozwinięty”));
        }
    });

To byłby najłatwiejszy sposób na zrobienie tego!

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

Oto technika, która nie polega na jquery i wykorzystuje natywny matches interfejs API DOM . Używa prefiksów dostawcy do obsługi przeglądarek wracających do IE9. Zobacz matchselector na caniuse.com, aby uzyskać szczegółowe informacje.

Najpierw utwórz funkcję matchSelector, taką jak:

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

Następnie, aby wykryć aktywowanie:

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

Odpowiedziałem na to w innym pytaniu, ze wszystkimi szczegółami, których możesz potrzebować:

Wykryj JEŻELI najeżdżasz na element za pomocą jQuery (ma 99 głosów pozytywnych w momencie pisania)

Zasadniczo możesz zrobić coś takiego:

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

Działa to tylko wtedy, oigdy obiekt jQuery zawiera pojedynczy element. Jeśli dopasowanych jest wiele elementów, musisz zastosować do każdego elementu, na przykład:

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

Zostało to przetestowane od wersji jQuery 1.7.

Oto funkcja, która pomaga sprawdzić, czy mysz znajduje się w elemencie, czy nie. Jedyne, co powinieneś zrobić, to wywołać funkcję, w której możesz mieć obiekt EventObject powiązany z myszą na żywo. coś takiego:

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

Możesz zobaczyć kod źródłowy tutaj w github lub na dole postu:

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

W oparciu o to, co powiedział „Happytime harry”, pamiętaj o użyciu funkcji jquery .data () do przechowywania identyfikatora limitu czasu. Jest to tak, że możesz bardzo łatwo odzyskać identyfikator limitu czasu, gdy „myszka” zostanie później uruchomiona na tym samym elemencie, co pozwala wyeliminować wyzwalacz zniknięcia podpowiedzi.

Możesz użyć zdarzeń myszy i pozostawienia myszy w jQuery. Możesz ustawić flagę, gdy mysz znajdzie się w pożądanym obszarze, i odznaczyć flagę, gdy opuszcza obszar.

Połączyłem pomysły z tego tematu i wymyśliłem to, co jest przydatne do pokazywania / ukrywania podmenu:

$("#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");
 });

Wydaje się dla mnie pracować. Mam nadzieję, że to komuś pomoże.

EDYCJA: Teraz uświadomienie sobie, że to podejście nie działa poprawnie w IE.

Nie mogłem użyć żadnej z powyższych sugestii.
Dlaczego wolę moje rozwiązanie?
Ta metoda sprawdza, czy wskaźnik myszy znajduje się nad elementem w dowolnym momencie wybranym przez Ciebie .
Mouseenter i : hover są fajne, ale mouseenter uruchamia się tylko wtedy, gdy poruszasz myszą, a nie gdy element porusza się pod myszą.
: hover jest całkiem słodki, ale ... IE

Więc robię to:

Nie 1. przechowuj pozycję myszy x, y za każdym razem, gdy jest ona przesuwana, kiedy potrzebujesz,
Nie 2. sprawdzaj, czy wskaźnik myszy znajduje się nad dowolnym elementem pasującym do zapytania, wykonuj różne czynności ... jak wyzwalanie zdarzenia mouseenter

// 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");
    }
});

Tylko notatkę o popularnej i pomocnej odpowiedzi Arthura Goldsmitha powyżej: jeśli przenosisz mysz z jednego elementu do drugiego w IE (przynajmniej do IE 9), możesz mieć problemy z poprawnym działaniem, jeśli nowy element ma przezroczyste tło (które byłoby domyślnie). Moim obejściem było nadanie nowemu elementowi przezroczystego obrazu tła.

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

SKRZYPCE

Możesz użyć is(':visible'); w jquery. Za $ ('. Item: hover') działa również w Jquery.

to jest fragment kodu HTML:

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

a to jest kod 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');

});

o tym mówiłem :)