Any HTML tags inside the tooltip cause the main tooltip to close when hovering

Question

I am new to jQuery, actually any AJAX / JavsScript (although not new to PHP, xHTML and CSS). Anyway, I'm trying to achieve a “tooltip” effect where I can hover over a div ... a new div disappears above it, and then when I exit the div, the tooltip disappears.

So, here is the main jQuery that I managed to put together by reading the odd reference 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');
    });

});

The problem is that I put the “any” html tag inside the div that is hovering over it, and the second you roll it back and the div disappears.

Any ideas how this can be fixed?

Greetings.

Answer 1

mouseleave mouseout mousenter hover, , :

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

---

.hover() , :

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

.hover() mouseenter mouseleave ( , , ), fadeIn() .

mouseout , mouseenter, .hover() . , ... <img> , :)