Comment puis-je révéler du contenu et maintenir sa visibilité lors de la migration vers un élément enfant?

Question

Je pose une question très similaire à this one -d'ir je dis identique?

Un exemple est actuellement dans la navigation inférieure on this page.

Je cherche à afficher le nom et le lien de la page suivante et précédente lorsqu'un utilisateur survole ses icônes respectives. Je suis à peu près sûr que ma solution impliquera des reliures ou des minuteurs, ce que je ne comprends pas très bien pour le moment.

Actuellement, j'ai:

$(document).ready(function() { 

var dropdown = $('span.hide_me'); 
var navigator = $('a.paginate_link'); 

dropdown.hide(); 

$(navigator).hover(function(){ 
    $(this).siblings(dropdown).fadeIn(); 
}, function(){ 
    setTimeout(function(){ 
     dropdown.fadeOut(); 
    }, 3000); 
}); 
}); 

avec son HTML respectif (un code ExpressionEngine compris dans le prix): excuses

 <p class="older_entry"><a href="{path='blog/'}" class="paginate_link page_back">Older</a><span class="hide_me">Older entry: 
     <br /> 
     <a href="{path='blog/'}" class="entry_text">{title}</a></span></p> 

     {/exp:weblog:next_entry} 

     <p class="blog_home"><a href="http://joshuacody.net/blog" class="paginate_link page_home">Blog Main</a><span class="hide_me">Back to the blog</span></p> 

     {exp:weblog:prev_entry weblog="blog"} 

     <p class="newer_entry"><a href="{path='blog/'}" class="paginate_link page_forward">Newer</a><span class="hide_me">Newer entry: 
     <br /> 
     <a href="{path='blog/'}" class="entry_text">{title}</a></span></p> 

Ce se comporte assez étrangement pour le moment. Parfois, il attend trois secondes, parfois il attend une seconde, parfois il ne disparaît pas complètement. Essentiellement, je cherche à fondre dans 'span.hide_me' sur le survol des icônes ('a.paginate_link'), et je voudrais qu'il reste visible lorsque les utilisateurs passent la souris sur la durée. Pensez que n'importe qui pourrait m'aider à travers ce processus et à comprendre exactement comment fonctionnent les minuteries et l'effacement des minuteries?

Merci beaucoup, Stack Overflow. Vous avez été incroyables en marchant sur cette voie d'apprentissage pour faire l'Internet.

Answer 1

Si vous voulez juste que cela fonctionne, vous pouvez essayer d'utiliser un plugin tooltip comme this one.

Si vous voulez comprendre comment cela doit être fait: d'abord, se débarrasser du délai d'expiration, et le faire fonctionner sans elle. La différence (du point de vue de l'utilisateur) est très faible et simplifie les choses (développement et débogage). Une fois que vous l'avez fait fonctionner comme vous le souhaitez, remettez le délai.

Maintenant, le problème est que vous ne voulez pas vraiment masquer l'élément affiché dans l'événement de souris du navigateur. Vous voulez le cacher dans son propre événement de souris. Donc, je pense que vous pouvez simplement passer le premier argument à la fonction de navigation du survol, et ajouter un autre hover aux listes déroulantes, qui aura une fonction vide comme premier argument, et le code caché dans son second argument.

EDIT (selon votre réponse à la réponse de stefpet)

Je comprends que vous ne voulez le menu déroulant pour disparaître si la souris se déplace hors du navigateur, déplacé à moins que son dans le menu déroulant lui-même. Cela complique un peu, mais voici comment cela peut être fait: sur les deux types d'événements mouse-out, vous définissez un timer qui appelle une fonction qui cache la liste déroulante. disons que la minuterie est 1 seconde. sur les deux types d'objets mouse-in pair, vous effacez ce temporisateur (voir le w3school page on timing pour la syntaxe, etc.). De plus, dans la souris du navigateur, vous devez afficher la liste déroulante.

Answer 2

Un autre problème avec le minuteur dans votre code est qu'il s'exécutera toujours lorsqu'il sortira la souris. En raison du délai de 3 secondes, vous pouvez très bien le déclencher à nouveau lorsque vous passez la souris, mais puisque le minuteur existe toujours, il disparaîtra même si vous avez réellement la souris sur l'élément.Si vous déplacez rapidement la souris d'avant en arrière, plusieurs minuteurs se déclenchent. Essayez de le faire fonctionner sans la minuterie d'abord, puis (si nécessaire) ajouter la complexité supplémentaire avec le retard (dont vous devez suivre et supprimer/réinitialiser en fonction de l'état).

Answer 3

Voici le code de travail final, pour tous ceux qui le rencontrent à nouveau. Ne hésitez pas à me faire savoir si je aurais pu améliorer dans toutes les manières:

$ (document) .ready (function() {

var dropdown = $('span.hide_me'); 
var navigator = $('a.paginate_link'); 

dropdown.hide(); 

$(navigator).hover(function(){ 
    clearTimeout(emptyTimer); 
    $(this).siblings(dropdown).fadeIn(); 
}, function(){ 
    emptyTimer = setTimeout(function(){ 
     dropdown.fadeOut(); 
    }, 500); 
}); 

$(dropdown).hover(function(){ 
    clearTimeout(emptyTimer); 
}, function(){ 
    emptyTimer = setTimeout(function(){ 
     dropdown.fadeOut(); 
    }, 500); 
}); 
});