jQuery Girl
  1. jQuery Girl
  3. Survolez, passez la souris et sortez la souris
Intereting Posts
jQuery fullcalendar: menu contextuel L’object ne prend pas en charge la propriété ou la méthode ‘selectbox’ Jquery IE6 problèmes de vol stationnaire, continue à charger l’image d’arrière-plan Faire pivoter une image à l’aide de Javascript Pourquoi la console n’affiche-t-elle pas les méthodes de l’object jQuery renvoyées par le sélecteur? Comment récupérer la valeur de la ligne de la table et utiliser cette valeur dans une fenêtre contextuelle modale, cliquez sur soumettre dans l’application MVC? Comment définir des valeurs pour gridview textbox à partir de la fonction javascript Ajouter une légende à un graphique en anneau – jqPlot Problème de routage ASP.Net MVC avec jQuery AJAX Lier un élément de modèle à l’index du tableau dans KnockoutJS Comment append un lien à un graphique en secteurs Google Comment basculer le bouton dans le groupe de boutons lors du chargement de page dans bootstrap3 avec jquery Comment puis-je afficher un HtmlTableRow précédemment caché via jQuery? Fullcalendar: conserve les propriétés de l’événement après le clic précédent / suivant comment capturer l’événement click d’un bouton généré dynamicment dans jQuery

Survolez, passez la souris et sortez la souris

J’apprends et utilise jQuery et souhaite afficher une icône de suppression pour certains éléments.

J’ai un div principal externe, qui contient le nombre de wrappers pour les éléments. À l’intérieur du wrapper d’élément, je souhaite afficher une icône de suppression lorsque l’utilisateur survole le wrapper d’élément et la supprimer lorsque l’utilisateur quitte le wrapper d’élément.

À l’aide de mouseover et mouseout , je peux afficher et supprimer l’icône, mais dès que je déplace la souris sur l’icône de suppression, elle est supprimée car elle déclenche l’événement mouseout pour le wrapper d’élément. Qu’est-ce que je fais mal?

Deux options pour vous :

  1. CSS’s :hover pseudo-classe (mais seulement si vous n’avez pas besoin de supporter IE6)
  2. événements mouseenter et mouseleave

CSS’s :hover pseudo-classe

Vous pouvez faire en sorte que le navigateur fasse tout le travail si vous n’avez pas besoin de la prise en charge d’IE6, en utilisant la pseudo-classe: :hover : 

 /* Don't show `child` elements inside `parent` elements...*/ parent child { display: none; } /* ...unless the `parent` element is being hovered over */ parent:hover child { display: block; /* or inline-block or whatever */ }

Exemple en direct

Cependant, IE6 ne supporte pas la pseudo-classe :hover sauf sur les éléments. IE7 + et tous les autres navigateurs récents font.

événements mouseenter et mouseleave

Si CSS ne le fait pas pour vous, vous recherchez les événements mouseenter et mouseleave , spécifiques à IE mais émulés par jQuery sur tous les autres navigateurs. jQuery a même une fonction pratique, hover , pour connecter les gestionnaires aux deux événements afin que vous puissiez accomplir ce que vous voulez faire. 

 $(...your parent element...).hover( function() { // Called when the mouse enters the element }, function() { // Called when the mouse leaves the element } );

Voici un exemple complet en direct :

HTML: 

 
Hover over me [X]
 
And me [X]
 
And me [X]

JavaScript utilisant jQuery: 

 $('div').hover( function() { $(this).find('span.del').show(); }, function() { $(this).find('span.del').hide(); } );

La raison pour laquelle vous avez eu des problèmes avec mouseover et mouseout est qu’ils bouillonnent . Le gestionnaire mouseout de votre élément parent voyait alors le mouseout bulle de l’élément sous-jacent lorsque votre souris est passée dans l’élément delete. mouseenter et mouseleave ne font pas de bulles et ne rencontrent donc pas ce problème.

avez-vous essayé d’utiliser les événements mouseenter et mouseleave ?

Vous pouvez appliquer le style à l’événement jQuery onmouseover et onmouseout. Lorsque l’utilisateur survole le menu, cet événement se déclenchera et vous pourrez définir des effets.

pour plus de détails