Any HTML tags inside of tooltip cause basic tooltip to close on hover

I'm new to jQuery, in fact any kind of AJAX / JavsScript (although not new to PHP, xHTML and CSS). Anyway I'm trying to achieve a "tooltip-like" effect, where I can hover over a div...the new div fades in above it and then when I exit the div the "tooltip" fades out.

So here's the basic jQuery I've managed to scrap together reading the odd guide here and there:

$(function()
{
    $('#sn-not-logged-in').hover(function()
    {
        $('#sn-not-logged-in-hover').fadeIn('medium');
    });

    $('#sn-not-logged-in-hover').mouseout(function()
    {
        $('#sn-not-logged-in-hover').fadeOut('medium');
    });

});

Problem is if I put "any" html tag inside the div that hovers in, the second you roll over it the div fades back out. 开发者_如何学编程

Any ideas how this can be fixed?

Cheers.

Updated for Comments

Just switching your events to mouseleave instead of mouseout and mousenter instead of hover will fix the issue for your markup, like this:

$(function() {
  $('#sn-not-logged-in').mouseenter(function() {
    $('#sn-not-logged-in-hover').fadeIn('medium');
  });
  $('#sn-not-logged-in-hover').mouseleave(function() {
    $('#sn-not-logged-in-hover').fadeOut('medium');
  });
});

Previous Answer

Change your .hover() up a bit, like this:

$(function() {
  $('#sn-not-logged-in').hover(function() {
    $('#sn-not-logged-in-hover').fadeIn('medium');
  }, function() {
     $('#sn-not-logged-in-hover').fadeOut('medium');
  });
});

.hover() executes on mouseenter and mouseleave (the first and second function you provide, respectively), so it's calling the fadeIn() already overlapping a bit already.

The mouseout however, fires even when entering a child, mouseenter which .hover() uses won't. So what's currently actually causing your current issue...moving the mouse onto the <img> tag inside, won't be a problem :)