How can I reveal content and maintain its visibility when mousing to a child element?

Question

I'm asking a question very similar to this one—dare I say identical?

An example is currently in the bottom navigation on this page.

I'm looking to display the name and link of the next and previous page when a user hovers over their respective icons. I'm pretty sure my solution will entail binding or timers, neither of which I'm seeming to understand very well at the moment.

Currently, I have:

$(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);
});
});

with its respective HTML (some ExpressionEngine code included—apologies):

     <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>

This is behaving pretty strangely at the moment. Sometimes it waits three seconds, sometimes it waits one second, sometimes it doesn't fade out altogether.

Essentially, I'm looking to fade in 'span.hide_me' on hover of the icons ('a.paginate_link'), and I'd like it to remain visible when users mouse over the span.

Think anyone could help walk me through this process and understand exactly how the timers and clearing of the timers is working?

Thanks so much, Stack Overflow. You guys have been incredible as I walk down this road of learning to make the internet.

Answer 1

If you just want to get it working, you can try to use a tooltip plugin like this one.

If you want to understand how this should be done: first, get rid of the timeout, and make it work without it. The difference (from the user's point of view) is very small, and it simplifies stuff (developing and debugging). After you get it working like you want, put the timeout back in.

Now, the problem is you don't really want to hide the shown element on the navigator mouse-out event. You want to hide it in its own mouse out event. So I think you can just pass the first argument to the navigator hover function, and add another hover to dropdowns, that will have an empty function as a first argument, and the hiding code in its second argument.

EDIT (according to your response to stefpet's answer)

I understand that you DO want the dropdown to disappear if the mouse moves out of the navigator, UNLESS its moved to the dropdown itself. This complicates a little, but here is how it can be done: on both types of items mouse-out event, you set a timer that calls a function that hides the dropdown. lets say the timer is 1 second. on both kind of item mouse-in even, you clear this timer (see the w3school page on timing for syntax, etc). plus, in the navigator's mouse-in you have to show the dropdown.

Answer 2

Another issue with the timer in your code is that it will always execute when mouse-out. Due to the 3 seconds delay you might very well trigger it again when mouse-over but since the timer still exist it will fade out despite you actually have the mouse over the element.

Moving the mouse back and forth quickly will trigger multiple timers.

Try to get it to work without the timer first, then (if really needed) add the additional complexity with the delay (which you must keep track of and remove/reset depending on state).

Answer 3

Here was the final working code, for anyone who comes across this again. Feel free to let me know if I could have improved it in any ways:

$(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);
});
});