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 :
:hover
pseudo-classe (mais seulement si vous n’avez pas besoin de supporter IE6) mouseenter
et mouseleave
: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.
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