La réponse peut être dans la vanille JS ou JQuery. Je souhaite cacher un DIV avec l'ID "MyDIV" si l'utilisateur ne plante plus sur un lien avec l'ID "MyLink" ou une plage avec l'ID "myspan". Si l'utilisateur a sa souris sur l'un ou l'autre élément "mydiv" montrera toujours, mais la seconde que l'utilisateur ne soit pas survolée parmi les deux (peu importe quel élément la souris de l'utilisateur part en premier) "mydiv" disparaîtra du visage d'existence.
En d'autres termes, c'est comme ça que je détecte la souris laissé sur un élément: mais comment dire (d'une manière qui fonctionnera réellement): < / p> Comment détecter cela?
5 Réponses :
Vous pouvez utiliser un multiple sélecteur :
Cela ne joint-t-il pas simplement 2 événements distincts à ces sélecteurs? C'est la même chose que les appeler séquentiellement non? Ou ai-je tort? La méthode ne déclenche-t-elle pas s'il planait sa souris sur l'élément A après avoir quitté l'élément B? Qui ne devrait pas être le cas.
Eh bien, interverseur utilisé || (logique ou ), pas logique et et dit que n'a pas d'importance à quel élément l'utilisateur La souris feuilles d'abord , alors ... ma réponse pourrait être valide, mais ce n'est pas clair :)
Je ne sais pas comment tu as fait ce travail de violon. Je fais une chose semblable et obtenez un comportement scintillant. : /
John j'ai trouvé la même chose votre problème. Ces œuvres de violon provoquent que Lovenohate a utilisé les mêmes sélecteurs pour Mouseener et Mouseleave! Si vous n'utilisez qu'un seul de ces sélecteurs pour Mouseener ou les divs ne sont pas proches, il scintille.
La question de l'OP demande une solution qui ne cachera qu'un élément / faire quelque chose si la souris a laissé les deux #element et #SomeotherElement . @Johnp souligne correctement dans le commentaire ci-dessus que cette solution va masquer l'élément / faire quelque chose si la souris quitte le #SomeElement ou #SomeotherElement . Le comportement de cette solution ne correspondra pas à ce que l'OP a demandé, où l'élément reste visible tandis que #SomeElement ou #SomeotherElement est planifié. Donc, je ne recommanderais pas d'utiliser ceci à moins que votre cas d'utilisation soit différent de celui de l'OP.
Quelque chose comme ça devrait fonctionner:
Yup, exactement ce que je pensais. Et +1 pour me montrer ce site génial!
Bien que de bien regarder, le nombre ne se met jamais mis à jour hors de la portée de la fonction. Cela fonctionne donc comme ceci: jsfiddle.net/2lngx . ;) Heureusement.
ne fonctionne pas pour moi ce qui fonctionne était de vérifier le E.RelatedTarget || E.AtoElement et utilisez le sélecteur le plus proche, alors voyons si nous avons des feuilles ou non.
Je pense que c'est votre solution !!!
$(document).ready(function() {
var someOtherElement = "";
$("#someElement").hover(function(){
var someOtherElement = $(this).attr("href");
$(someOtherElement).show();
});
$("#someElement").mouseleave(function(){
var someOtherElement= $(this).attr("href");
$(someOtherElement).mouseenter(function(){
$(someOtherElement).show();
});
$(someOtherElement).mouseleave(function(){
$(someOtherElement).hide();
});
});
});
----
html
----
<div id="someElement">
<ul>
<li><a href="#tab1">element1</a></li>
<li><a href="#tab2">element2</a></li>
</ul>
</div>
<div id="tab1" style="display: none"> TAB1 </div>
<div id="tab2" style="display: none"> TAB1 </div>
Bien que la réponse de LonesomeDay est parfaitement valide, j'ai changé mon HTML pour avoir les deux éléments d'un conteneur. Je voulais à l'origine éviter cela, je devais donc faire plus de refactoring pour mes clients dans d'autres modèles HTML, mais je pense que cela paiera à long terme.
<div id="my-container">
<div class="elem1">Foo</div>
<div class="elem2">Bar</div>
</div>
$('#my-container').mouseleave(function() { console.log("left"); });
Vous pouvez utiliser joliment d'utiliser Voici le code (ajouté à la réponse de LonesomeDay): P> settimeout () code> pour donner le mouseleave () code> Fonction une "tolérance", cela signifie si vous quittez les divs mais entrez l'un d'entre eux Dans une période donnée, il ne déclenche pas la fonction masquer () code>. var count = 0;
var tolerance = 500;
$('#d1, #d2').mouseenter(function(){
count++;
$('#d3').show();
}).mouseleave(function(){
count--;
setTimeout(function () {
if (!count) {
$('#d3').hide();
}
}, tolerance);
});