( Regardez la dernière modification de cette réponse si vous devez utiliser .on()des éléments remplis de JavaScript )
Utilisez ceci pour les éléments qui ne sont pas remplis en utilisant JavaScript:
$(".selector").on("mouseover", function () {
//stuff to do on mouseover
});
.hover()a son propre gestionnaire: http://api.jquery.com/hover/
Si vous voulez faire plusieurs choses, enchaînez-les dans le .on()gestionnaire comme ceci:
$(".selector").on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
});
Selon les réponses fournies ci-dessous, vous pouvez utiliser hoveravec .on(), mais:
Bien que fortement déconseillé pour le nouveau code, vous pouvez voir le pseudo-événement-nom "hover" utilisé comme raccourci pour la chaîne "mouseenter mouseleave". Il attache un seul gestionnaire d'événements pour ces deux événements, et le gestionnaire doit examiner event.type pour déterminer si l'événement est mouseenter ou mouseleave. Ne confondez pas le pseudo-événement-nom "hover" avec la méthode .hover (), qui accepte une ou deux fonctions.
En outre, il n'y a aucun avantage en termes de performances à l'utiliser et c'est plus volumineux que d'utiliser simplement mouseenterou mouseleave. La réponse que j'ai fournie nécessite moins de code et est la bonne façon de réaliser quelque chose comme ça.
ÉDITER
Cela fait un moment que cette question n'a pas reçu de réponse et elle semble avoir gagné du terrain. Le code ci-dessus existe toujours, mais je voulais ajouter quelque chose à ma réponse d'origine.
Bien que je préfère utiliser mouseenteret mouseleave(m'aide à comprendre ce qui se passe dans le code) avec, .on()cela revient à écrire ce qui suit avechover()
$(".selector").hover(function () {
//stuff to do on mouse enter
},
function () {
//stuff to do on mouse leave
});
Étant donné que la question initiale a demandé comment ils pouvaient utiliser correctement on()avec hover(), je pensais que je corrigerais l'utilisation de on()et n'a pas trouvé nécessaire d'ajouter le hover()code au moment.
MODIFIER LE 11 DÉCEMBRE 2012
Certaines nouvelles réponses fournies ci-dessous expliquent comment cela .on()devrait fonctionner si la divquestion en question est remplie à l'aide de JavaScript. Par exemple, supposons que vous remplissiez un événement divutilisant jQuery .load(), comme ceci:
(function ($) {
//append div to document body
$('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));
Le code ci-dessus pour .on()ne tiendrait pas. Au lieu de cela, vous devez modifier légèrement votre code, comme ceci:
$(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
Ce code fonctionnera pour un élément rempli de JavaScript après qu'un .load()événement s'est produit. Remplacez simplement votre argument par le sélecteur approprié.
mouseenteretmouseleave, comme suggéré par calebthebrewer.