Détecter si planant au-dessus de l’élément avec jQuery

Question

Je ne cherche pas une action à appeler lorsque planant, mais plutôt un moyen de dire si un élément est être survolé actuellement. Par exemple :

Y a-t-il une méthode jQuery qui accomplit cette mission ?

Answer 1

D'Origine (Et Corriger) Réponse:

Vous pouvez utiliser is() et de vérifier le sélecteur :hover.

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

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

(Cela ne fonctionne que lorsque le sélecteur correspond à seulement 1 élément - Voir Modifier 3 pour plus de détails)

.

Edit 1 (29 juin 2013): (Applicable à jQuery 1.9.x uniquement, voir la prochaine Édition 2)

Cette réponse a été la meilleure solution à l'époque, la question a été répondue. Ce": hover sélecteur a été enlevé à l' .hover() méthode de suppression en jQuery 1.9.x.

Il est intéressant de noter une récente réponse par "allicarn" montre qu'il est possible d'utiliser :hover comme sélecteur CSS (vs Grésillement) lorsque vous préfixe avec un sélecteur $($(this).selector + ":hover").length > 0, et il semble fonctionner!

Aussi, hoverIntent plugin mentionné dans une autre réponse est très joli ainsi.

Edit 2 (21 septembre 2013): .is(":hover") travaux

Basé sur un autre commentaire, j'ai remarqué que d'une façon originale, que j'ai posté, .is(":hover"),, en réalité, encore travaille en jQuery, donc.

1. Il a travaillé en jQuery 1.7.x.

2. Il a cessé de travailler dans 1.9.1, quand quelqu'un a signalé que c'est à moi, et nous avons tous pensé que c'était lié à jQuery retrait de l' hover alias pour la gestion des événements dans cette version.

3. Il a travaillé à nouveau en jQuery 1.10.1 et 2.0.2 (peut-être 2.0.x), ce qui suggère que l'échec en 1.9.x est un bug ou si non un comportement intentionnel comme nous le pensions dans le point précédent.

Si vous souhaitez tester ce q particulier la version jQuery, il suffit d'ouvrir le JSFidlle exemple au début de cette réponse, le changement désiré version jQuery et cliquez sur "Exécuter". Si les changements de couleur sur le vol stationnaire, il fonctionne.

.

Edit 3 (9 Mars 2014): Il ne fonctionne que lorsque le jQuery séquence contient un seul élément

Comme indiqué par @Wilmer dans les commentaires, il a un charme qui ne fonctionne même pas à l'encontre de jQuery versions moi et d'autres ici testé contre. Quand j'ai essayé de trouver quelle est la particularité de son cas, j'ai remarqué qu'il essayait de vérifier plusieurs éléments à la fois. C'était jeter Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover.

Donc, en travaillant avec son violon, ce n'est PAS le travail:

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

Bien que ce NE travail:

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

Il travaille également avec jQuery séquences qui contiennent un seul élément, comme si le sélecteur d'origine correspondait à un seul élément, ou si vous l'avez appelé .first() sur les résultats, etc.

Answer 2

Utilisation :

jQuery 1.9 +

Answer 3

Il ne fonctionne pas en jQuery 1.9. Fait ce plugin basé sur la réponse d’user2444818.

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

Answer 4

Quelques mises à jour pour ajouter, après avoir travaillé sur ce sujet pendant un certain temps:

1. toutes les solutions .is(":hover") pause sur jQuery 1.9.1
2. La raison la plus probable pour vérifier si la souris est encore au niveau d'un élément est de tenter d'empêcher les événements de tirer au-dessus les uns des autres. Par exemple, nous avions des problèmes avec notre mouseleave être déclenchée avant de faire de notre événement mouseenter même pas terminé. Bien entendu, c'était à cause d'un rapide mouvement de la souris.

Nous avons utilisé hoverIntent https://github.com/briancherne/jquery-hoverIntent pour résoudre le problème pour nous. Essentiellement, il déclenche si le mouvement de la souris est plus délibérée. (une chose à noter est qu'il va déclencher sur la souris saisie d'un élément et de laisser - si vous souhaitez uniquement utiliser un seul passage, le constructeur d'une fonction vide )

Answer 5

Étendre sur la réponse de @Mohamed. Vous pouvez utiliser un petit encapsulation

Comme ça :

Utilisez-le comme :

Fourchue du violon : http://jsfiddle.net/cgWdF/1/