Czy można używać jQuery .on i hover?

Mam plik, <ul>który jest zapełniany javascript po początkowym załadowaniu strony. Obecnie używam .bindz mouseoveri mouseout.

Projekt właśnie zaktualizował się do jQuery 1.7, więc mam opcję korzystania .on, ale wydaje się, że nie mogę go uruchomić hover. Czy można używać .onz hover?

EDYCJA : Elementy, z którymi się wiążę, są ładowane javascript po załadowaniu dokumentu. Dlatego używam oni nie tylko hover.

( Spójrz na ostatnią edycję w tej odpowiedzi, jeśli chcesz używać .on()z elementami wypełnionymi JavaScript )

Użyj tego dla elementów, które nie są wypełniane za pomocą JavaScript:

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover()ma własny moduł obsługi: http://api.jquery.com/hover/

Jeśli chcesz zrobić wiele rzeczy, połącz je w .on()module obsługi w następujący sposób:

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

Zgodnie z odpowiedziami podanymi poniżej możesz używać hoverz.on() , ale:

Chociaż zdecydowanie zniechęcony jest nowy kod, możesz zobaczyć pseudo-zdarzenie „hover” używane jako skrót dla ciągu „mouseenter mouseleave”. Dołącza jeden moduł obsługi zdarzeń dla tych dwóch zdarzeń, a moduł obsługi musi sprawdzić event.type, aby ustalić, czy zdarzenie to jest centrum myszy, czy pozostawienie myszy. Nie należy mylić nazwy pseudo-zdarzenia „hover” z metodą .hover (), która akceptuje jedną lub dwie funkcje.

Ponadto nie ma żadnych korzyści związanych z wydajnością korzystania z niego i jest bardziej nieporęczny niż zwykłe używanie mouseenter lub mouseleave. Podana przeze mnie odpowiedź wymaga mniej kodu i jest właściwym sposobem na osiągnięcie czegoś takiego.

EDYTOWAĆ

Minęło trochę czasu, odkąd udzielono odpowiedzi na to pytanie i wydaje się, że zyskało ono trochę trakcji. Powyższy kod nadal obowiązuje, ale chciałem dodać coś do mojej oryginalnej odpowiedzi.

Chociaż wolę używać mouseenteri mouseleave(pomaga mi zrozumieć, co się dzieje w kodzie) z .on()nim, to tak samo jak pisanie poniższegohover()

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

Ponieważ oryginalne pytanie nie zapytać jak mogli prawidłowo korzystać on()z hover(), myślałem, że chciałbym poprawić wykorzystanie on()i nie uważają, że konieczne jest dodanie hover()kodu w czasie.

EDYCJA 11 GRUDNIA 2012

Niektóre nowe odpowiedzi podane poniżej szczegółowo opisują, jak .on()powinno działać, jeśli divpytanie jest wypełniane za pomocą JavaScript. Załóżmy na przykład, że wypełniasz zdarzenie divjQuery za pomocą .load():

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

Powyższy kod .on()nie będzie obowiązywał. Zamiast tego powinieneś nieco zmodyfikować kod, tak jak poniżej:

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

Ten kod będzie działał dla elementu wypełnionego JavaScript po .load()zdarzeniu. Po prostu zmień argument na odpowiedni selektor.

Żadne z tych rozwiązań nie działało dla mnie, gdy najechanie myszą na obiekty utworzone po załadowaniu dokumentu w odpowiedzi na pytanie. Wiem, że to pytanie jest stare, ale mam rozwiązanie dla tych, którzy wciąż szukają:

$("#container").on('mouseenter', '.selector', function() {
    //do something
});
$("#container").on('mouseleave', '.selector', function() {
    //do something
});

Spowoduje to powiązanie funkcji z selektorem, dzięki czemu obiekty z tym selektorem wykonane po przygotowaniu dokumentu będą mogły nadal go wywoływać.

Nie jestem pewien, jak wygląda reszta twojego Javascript, więc nie będę w stanie stwierdzić, czy występują jakieś zakłócenia. Ale .hover()działa dobrze jako wydarzenie .on().

$("#foo").on("hover", function() {
  // disco
});

Jeśli chcesz móc wykorzystać jego zdarzenia, użyj zwróconego obiektu ze zdarzenia:

$("#foo").on("hover", function(e) {
  if(e.type == "mouseenter") {
    console.log("over");
  }
  else if (e.type == "mouseleave") {
    console.log("out");
  }
});

http://jsfiddle.net/hmUPP/2/

Funkcja hover jQuery daje funkcję najechania myszką i myszy.

$ (selektor) .hover (inFunction, outFunction);

$(".item-image").hover(function () {
    // mouseover event codes...
}, function () {
    // mouseout event codes...
});

Źródło: http://www.w3schools.com/jquery/event_hover.asp

Po prostu surfowałem po Internecie i czułem, że mogę coś wnieść. Zauważyłem, że powyższy kod opublikowany przez @calethebrewer może powodować wiele wywołań selektora i nieoczekiwane zachowanie, na przykład:

$(document).on('mouseover', '.selector', function() {
   //do something
});
$(document).on('mouseout', '.selector', function() {
   //do something
});

To skrzypce http://jsfiddle.net/TWskH/12/ ilustruje mój punkt widzenia. Podczas animowania elementów, takich jak wtyczki, zauważyłem, że te wielokrotne wyzwalacze powodują niezamierzone zachowanie, które może spowodować wywołanie animacji lub kodu więcej niż jest to konieczne.

Moją sugestią jest po prostu zastąpienie mouseenter / mouseleave: -

$(document).on('mouseenter', '.selector', function() {
   //do something
});
$(document).on('mouseleave', '.selector', function() {
   //do something
});

Chociaż zapobiegło to wywołaniu wielu wystąpień mojej animacji, ostatecznie zdecydowałem się na najechanie kursorem myszy / pozostawienie myszy, ponieważ musiałem ustalić, kiedy dzieci rodzica były najechane.

Można skorzystać .on()z hoverrobiąc to, co mówi Dodatkowa sekcja Uwagi:

Chociaż zdecydowanie zniechęcony jest nowy kod, możesz zobaczyć pseudo-zdarzenie „hover” używane jako skrót dla ciągu „mouseenter mouseleave”. Dołącza jeden moduł obsługi zdarzeń dla tych dwóch zdarzeń, a moduł obsługi musi sprawdzić event.type, aby ustalić, czy zdarzenie to jest centrum myszy, czy pozostawienie myszy. Nie należy mylić nazwy pseudo-zdarzenia „hover” z metodą .hover (), która akceptuje jedną lub dwie funkcje.

Byłoby to wykonać następujące czynności:

$("#foo").on("hover", function(e) {

    if (e.type === "mouseenter") { console.log("enter"); }
    else if (e.type === "mouseleave") { console.log("leave"); }

});

EDYCJA (uwaga dla użytkowników jQuery 1.8+):

Przestarzałe w jQuery 1.8, usunięte w 1.9: Nazwa „hover” używana jako skrót dla ciągu „mouseenteraveleave”. Dołącza jeden moduł obsługi zdarzeń dla tych dwóch zdarzeń, a moduł obsługi musi zbadać event.type w celu ustalenia, czy zdarzenie jest centrum myszy czy pozostawieniem myszy. Nie należy mylić nazwy pseudo-zdarzenia „hover” z metodą .hover (), która akceptuje jedną lub dwie funkcje.

$("#MyTableData").on({

 mouseenter: function(){

    //stuff to do on mouse enter
    $(this).css({'color':'red'});

},
mouseleave: function () {
    //stuff to do on mouse leave
    $(this).css({'color':'blue'});

}},'tr');

Możesz podać jeden lub wiele typów zdarzeń oddzielonych spacją.

Więc hoverrówna sięmouseenter mouseleave .

Oto moja sugestia:

$("#foo").on("mouseenter mouseleave", function() {
    // do some stuff
});

Jeśli potrzebujesz tego jako warunku na innym wydarzeniu, rozwiązałem to w ten sposób:

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

Następnie w innym wydarzeniu możesz go łatwo użyć:

 if ($(this).data('hover')){
      //...
 }

(Widzę, że niektórzy używają is(':hover')do rozwiązania tego. Ale to nie jest (jeszcze) prawidłowy selektor jQuery i nie działa we wszystkich zgodnych przeglądarkach)

Wtyczka jQuery hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html wykracza daleko poza naiwne podejścia wymienione tutaj. Chociaż z pewnością działają, niekoniecznie zachowują się tak, jak oczekują użytkownicy.

Najsilniejszym powodem użycia hoverIntent jest limit czasu funkcja . Umożliwia wykonywanie takich czynności, jak zapobieganie zamykaniu menu, ponieważ użytkownik przeciąga myszą nieco za daleko w prawo lub w lewo, zanim kliknie żądany element. Zapewnia również możliwości nie aktywowania zdarzeń zawisu w zaporze i czeka na skoncentrowane zawisanie.

Przykład użycia:

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )

Dalsze wyjaśnienie tego można znaleźć na https://stackoverflow.com/a/1089381/37055