Passez la souris, la souris et la souris

Je suis d'apprentissage et à l'aide de jQuery et que vous voulez afficher une icône de suppression pour certains éléments.

J'ai un externe div principale, qui contient nombre de wrappers pour les éléments. À l'intérieur de l'élément wrapper, je veux afficher une icône de suppression lorsque l'utilisateur survole l'élément wrapper, et l'enlever lorsque l'utilisateur se déplace à l'extérieur de l'élément wrapper.

À l'aide de mouseover et mouseout, je peux afficher et de supprimer l'icône, mais dès que je bouge ma souris sur l'icône de suppression, il est supprimé car il déclenche l' mouseout cas pour l'élément wrapper. Ce que je fais mal?

Dans un "doh!" moment, j'ai ajouté le CSS manquante réponse à ma réponse. Vous n'avez pas vraiment dire que vous a pour ce faire avec JavaScript, avez-vous? 🙂 Mais il y a une option JavaScript (ce qui, vous en aurez besoin si vous voulez l'appui IE6).

OriginalL'auteur KutePHP | 2010-12-16

  1. 10

    Deux options pour vous:

    1. CSS, :hover pseudo-classe (mais seulement si vous n'avez pas de support de IE6)
    2. mouseenter et mouseleave événements

    CSS, :hover pseudo-classe

    Vous pouvez demander au navigateur de faire tout le travail si vous n'avez pas besoin de l'appui IE6, à l'aide de la :hover pseudo-classe:

    /* 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 */
}

    Live exemple

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

    mouseenter et mouseleave événements

    Si CSS ne pas le faire pour vous, vous êtes à la recherche pour le mouseenter et mouseleave événements, qui sont IE, mais émulé par jQuery sur tous les autres navigateurs. jQuery a même une fonction pratique, hover, pour accrocher des gestionnaires à la fois les événements de sorte que vous pouvez facilement accomplir ce que vous cherchez à faire.

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

    Voici une complète live exemple:

    HTML:

    <div>Hover over me <span class='del'>[X]</span></div>
<div>And me <span class='del'>[X]</span></div>
<div>And me <span class='del'>[X]</span></div>

    JavaScript à l'aide de jQuery:

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

    La raison pour laquelle vous eu des ennuis avec mouseover et mouseout, c'est qu'ils bulle, et donc votre mouseout gestionnaire sur votre élément parent était de voir les bulles mouseout de l'élément sous-jacent lors de votre souris déplacée dans l'élément supprimer. mouseenter et mouseleave n'avez pas de bulle, et donc ils n'ont pas ce problème.

    Hey merci, en fait j'avais utilisé cette approche à l'aide de jquery, mais mon dans mon cas, je veux ajouter l'icône sur le vol stationnaire. Avec l'approche ci-dessus, lorsque je déplace la souris sur l'icône de plusieurs icônes sont ajoutés à l'élément de wrapper. Comment faire pour arrêter cela ?
    À partir de votre description, il semble que vous avez essayé d'utiliser mouseover et mouseout plutôt que mouseenter et mouseleave. Encore une fois, ils sont différents événements et ils se comportent différemment (voir la note à la fin de la réponse ci-dessus). Mais si vous avez vraiment été à l'aide de mouseenter et mouseleave, il semble que vous n'étiez pas enlever les éléments sur mouseleave. Fonctionne très bien si vous n': jsbin.com/umalu4/2, Mais l'ajout et la suppression de la DOM est plus lourd poids de l'opération que de montrer/cacher, de recommander montrer/cacher.
    Hey merci encore...je corrige cela...j'étais ajout d'image directement, je l'ai ajouté à l'arrière-plan de la plage et je l'ai fait. 🙂

    OriginalL'auteur T.J. Crowder

  2. 3

    avez-vous essayé d'utiliser mouseenter et mouseleave les événements de la place?

    OriginalL'auteur mkoryak