J'apprends et utilise jQuery et je veux afficher une icône de suppression pour certains éléments.
J'ai une DIV principale extérieure, qui contient le nombre d'emballages pour les éléments. À l'intérieur de l'emballage de l'élément, je souhaite afficher une icône de suppression lorsque l'utilisateur plane sur l'emballage d'élément et retirez-le lorsque l'utilisateur quitte l'emballage de l'élément.
Utilisation de Mousousever et Mouseout , je peux afficher et supprimer l'icône, mais dès que je déplace ma souris sur l'icône de suppression, il est supprimé car il tire la < Code> Mouseout Evénement pour l'emballage d'élément. Qu'est-ce que je fais mal?
3 Réponses :
Vous pouvez faire le navigateur faire tout le travail si vous n'avez pas besoin de support IE6, en utilisant le Cependant, IE6 ne prend pas en charge le Si CSS ne le fait pas pour vous, Vous recherchez le Voici une complète EXEMPLE LIVE : P> HTML: P>
: Survol code> pseudo-classe (mais seulement si vous n'avez pas à prendre en charge IE6) LI>
MousEnter Code> et Mouseleave Code> Événements Li>
OL> CSS
: HOVER CODE> PSeudo-Class H3> : survol code> pseudo-classe: p> : plancher code> pseudo-classe sauf sur A code> éléments. IE7 + et tous les autres navigateurs récents font. P>
MousEnter code> et Mouseleave code> Evénements h3> MouseNerer code> et mouseleave code> événements, qui sont spécifiques, mais émulés par JQuery sur tous les autres navigateurs. JQuery a même une fonction pratique, survol code> , pour accrocher les gestionnaires à la fois Événements afin que vous puissiez accomplir facilement ce que vous cherchez à faire. p> $('div').hover(
function() {
$(this).find('span.del').show();
},
function() {
$(this).find('span.del').hide();
}
);
Hé, merci, j'avais utilisé cette approche en utilisant jQuery, mais mon cas dans mon cas je souhaite ajouter l'icône sur la survolte. Avec l'approche ci-dessus, lorsque je déplace la souris sur l'icône, plusieurs icônes sont ajoutées à l'emballage d'élément. Comment arrêter cela?
@KutaPHP: à partir de votre description, il semble que vous ayez essayé d'utiliser Mouseover et mouseout plutôt que sourisenter et Mouseleave . Encore une fois, ils sont des événements différents et ils se comportent différemment (voir note à la fin de la réponse ci-dessus). Mais si vous utilisiez vraiment sourisenter et mouseleave , il ressemble à vous ne retirez pas les éléments sur Mouseleave . Fonctionne bien si vous faites: jsbin.com/umalu4/2 mais ajouter et supprimer de la DOM est une opération de poids plus lourde que montrant / cacher, recommandant montrer / cacher.
Hey merci encore ... j'ai réparé ça ... J'ajoutais directement une image directement, je l'ai ajouté comme arrière-plan à la portée et je l'ai fait. :)
Avez-vous essayé d'utiliser MouseNerer et mouseleave événements à la place?
Vous pouvez appliquer un style sur l'événement JQuery Onmouseover et Onmouseout. Lorsque l'utilisateur plane via le menu, cet événement se déclenchera là-bas, vous pouvez définir des effets.
Dans un "Doh!" moment, j'ai ajouté la réponse du CSS manquant à ma réponse. Vous n'avez pas réellement dit que vous avait de faire cela avec JavaScript, n'est-ce pas? :-) Mais il y a aussi une option JavaScript (dont vous aurez besoin si vous souhaitez un support IE6).