Le carré rouge est la partie d'un conteneur avec la classe "Parent". Si je plions la souris sur cette place rouge, il disparaît. Mais pourquoi? Je m'attendais à ce que cela ne devrait pas.
Comportement attendu: il ne disparaît pas depuis que la place rouge est une partie du conteneur ".parent" et j'ai clairement indiqué que l'événement de la souris survient sur ce conteneur. P> Il y avait une suggestion que cette question est un duplicata de p>
JavaScript Mouseover / Mouseout Numéro avec élément enfant P>
d'une certaine manière - oui, mais je pense que cette question fournit de la valeur, car elle fournit non seulement la solution (" Vous pouvez essayer ceci. "), mais explique également pourquoi vous devriez utiliser cela et pourquoi la solution initiale ne fonctionne pas car elle est censée. p>
p>
<span class="parent">Hover mouse over this text<br></span>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function removeSquare()
{
$(this).find(".kvadrat").remove();
}
function addSquare()
{
$(this).append("<span style='display:inline-block;width: 50px;height: 50px;background-color:red' class='kvadrat'></span>");
$(this).on("mouseout", removeSquare);
}
$(".parent").on("mouseover", addSquare);
</script>5 Réponses :
Je sais que cela ne répond pas directement à votre question JavaScript, mais j'aimerais ouvrir vos yeux si vous n'êtes pas limité à JavaScript. Vous pouvez facilement y parvenir avec p>
<span class="parent">Hover mouse over this text<br>
<span class='kvadrat'></span></span>
Merci beaucoup pour la solution! Mais cela n'annule pas la question, cependant, comme il y a quelque chose que je ne comprends clairement pas de JavaScript.
J'aime votre approche, mais il y a le problème: si vous lancez la souris du texte sur la place lentement, le carré disparaît. C'est la raison pour laquelle j'ai rejeté cette approche dans le passé.
Si votre souris entre dans la place rouge au sommet, cela ne se produit pas, non? Ce n'est que si vous essayez d'entrer dans la place du côté droit, auquel vous avez essentiellement cessé de planifier le texte.
@THOMAS: Cela peut arriver ou peut ne pas se produire même en entrant du haut, en fonction de votre navigateur et de ses paramètres de police. Vous pouvez certainement certainement le déclencher en ajoutant, disons, .parent {line-hauteur: 2} au CSS. Le correctif est soit pour rendre l'élément .parent un bloc (de sorte qu'il ne peut pas avoir de lacunes entre les lignes) ou pour définir une marge supérieure négative suffisante sur le carré pour vous assurer qu'il chevauche toujours la Texte (éventuellement avec la teneur visible réelle du carré déplacé dans un élément interne avec une marge supérieure positive correspondante).
N'a pas considéré cela, mais cela peut en effet être corrigé. Merci!
Vous pouvez obtenir la même chose avec CSS.
p>
<span class="parent">Hover mouse over this text<br> <span class='child'></span> </span>
La chose la plus drôle est la suivante: il a le même problème :) Les carrés disparaissent après avoir survolé.
J'ai planifié la souris sur une boîte rouge et elle n'a pas disparu.
Essayez de le faire lentement
Eh bien, j'ai essayé lentement aussi. J'ai survolé le texte aussi bien que la boîte rouge et rien n'a disparu. Dès que vous sortez de la boîte rouge, cela disparaîtrait et mais ce ne sera pas pendant que votre souris est dessus.
Ensuite, essayez vraiment lentement :) Le navigateur est chrome, et si vous déplacez lentement le curseur de la souris du mot «verser» sur la place, il disparaît à un moment donné.
Voudrais comprendre l'utilisation-cas d'envergure qui lentement? Qu'essayez-vous de construire et de ce qui est le cas d'utilisation pour cette survolte?
Ajouter un rembourrage à la classe. Cela lui donnera une plus grande zone cible.
C'est un comportement normal de .mouseout () événement.
Affiche le nombre de fois que les événements Mouseout et Mouseleave sont déclenchés. Mouseout incendies lorsque le pointeur quitte l'élément
enfant fort> comme bien, tandis que Mouseleave incendie uniquement lorsque le pointeur quitte le élément lié. p> blockQuote> Vous devez utiliser .Mouseenter () et . Mouseleave () événements, p>
p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="parent">Hover mouse over this text<br></span>
Carré ne disparaît pas même si je vols la souris à droite de la place (en dehors de celui-ci) au même rang
J'ai joué avec CSS pour voir ce qui se passe. Vérifiez la mise à jour JSFIDDLE JSFIDDLE.net/LP3L7DP6/3
Je ne reçois pas le bowvote, c'est la bonne explication.
Ocanal, c'est une bonne solution, mais si vous allongez la souris très lentement, alors vous verrez que la place disparaît toujours.
@Jaroslavtavgen, il y a un autre problème en fait, car vous mettez un élément bloqué en ligne dans l'élément en ligne n'est pas valide. Donc, votre portée doit également être en ligne.
Pourquoi ce n'est pas valide?
Vérifiez Ce , vous verrez un écart entre la boîte et le texte, c'est pourquoi un problème apparaît lorsque vous vous déplacez. le curseur lentement et n'utilise pas de blocage en ligne pour .parent. Ce n'est pas valide car l'élément en ligne ne peut pas couvrir un élément bloqué. Stackoverflow.com/Questtions/9089953/...
J'ai essayé votre solution sur mon projet et ça marche! Merci beaucoup pour l'explication! Pourquoi est-il si rarement expliqué que la souris et la souris ont une caractéristique aussi étrange et non très logique?
@Jaroslavtavgen de JQuery Doc: [. Mouseover ()] Peut causer de nombreux maux de tête en raison d'un bouillonnement d'événement. Par exemple, lorsque le pointeur de la souris se déplace sur l'élément interne de cet exemple, un événement de la souris d'introduction sera envoyé à cela, puis couchage jusqu'à l'extérieur. Cela peut déclencher notre gestionnaire de moussers lié à Inopportun. Voir la discussion pour .Mouseener () pour une alternative utile API.JQUERY.com/mouseOveroverle Il est expliqué et démontré. Le doc doit juste être lu :)
Vous avez le même comportement lors de l'utilisation de la norme JavaScript AddeventListener . Vous pouvez utiliser le troisième paramètre pour spécifier si vous souhaitez utiliser capturant ou Bubbling Mode: Developer.Mozilla.org/it/docs/web/api/element/addeventlisten er
C'est à cause de l'événement bouillonnant. Lorsque vous entrez dans la portée de l'enfant, JQuery fera le feu à la souris parce que vous êtes maintenant allé à une portée de l'enfant. Si vous voulez continuer, utilisez-vous, utilisez Mouseener et Louseleave qui ne tire pas avant de quitter l'élément réel, quels que soient les éléments enfants.
<span class="parent">Hover mouse over this text<br></span>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function removeSquare()
{
$(this).find(".kvadrat").remove();
}
function addSquare()
{
$(this).append ( "<span style='display:inline-block;width: 50px;height: 50px;background-color:red' class='kvadrat'></span>" );
$(this).on("mouseleave", removeSquare);
}
$ ( ".parent" ).on ( "mouseenter", addSquare );
</script>
Au fur et à mesure que d'autres personnes ont noté, votre problème d'origine est que définir A ( bleu clair) couleur de fond sur l'élément parent montre clairement le problème; En fonction de la police et de la hauteur de la ligne Le navigateur choisit, l'élément parent et la boîte peuvent ressembler à ceci: p> ou comme ceci: p> définir manuellement une hauteur de ligne particulièrement grande fait que Problème Facilement reproductible (exemple CSS basé sur La réponse de Thomas van Broekhoven ): P> P> Mouseover code> et Mouseout code> Les événements incendient également pour les éléments enfants. La solution à ce problème est soit à utiliser SUPERENTER CODE> et Mouseleave code> événements ou simplement pour remplacer le code JS avec le CSS : Hover code> pseudo-classe . Cependant, la raison pour laquelle les autres solutions JS et CSS affichées ici se comportent parfois de manière erratique (provoquant la disparition de la place si vous déplacez la souris dessus lentement, mais pas si vous le déplacez rapidement, et non sur tous les navigateurs, même si vous vous déplacez. Il est lentement) parce que, en fonction de votre navigateur et de vos paramètres de police, il peut ne pas être un petit espace entre la ligne supérieure du texte et le carré en dessous. Si l'écart existe et que votre curseur de la souris frappe-le tout en se déplaçant du texte sur le carré, le navigateur considérera la souris pour avoir laissé l'élément parent et cachera ainsi le carré. P> 
p> 
p>
<span class="parent">Hover mouse over this text!<br>
Here's another line of text.<br>
<span class='kvadrat'><span class='inner'></span></span></span>
Merci d'avoir ajouté ces détails. J'espère que cela aidera les autres à comprendre la théorie.
Vous avez utilisé $ (ceci) .on ("Mouseout", supprimer Square); C'est pourquoi c'est la disparition
Mais ça ne devrait pas. Carré est la partie de $ (ceci).
BTW, votre code a un autre problème, aussi: chaque fois que les incendies d'événement Mouseover , vous ajoutez une autre copie du gestionnaire mouseout . Si vous continuez à déplacer la souris à l'intérieur et à l'extérieur de l'élément parent, vous finirez par vous retrouver avec des dizaines de gestionnaires mouseout sur celui-ci.