How to debug expected DOM behaviour in jQuery?

I have this code:

$('.user_info').click(开发者_StackOverflow社区function(){
    var pos = $(this).offset();
    rel_value = $(this).attr('rel');

    $('#' + rel_value).css({top: pos.top + 'px', left: pos.left + 'px'});
    $('#' + rel_value).show('slow');

    $('#' + rel_value).hover(function(){}, function(){
        $(this).fadeOut('slow');
    });

    return false;
});

When I click on link with class user_info, it shows div identified by '#' + rel_value. The problem is that div shows but at the same times fades out ($(this).fadeOut('slow');) even though I have specified this in mouseout parameter.

What I want is that div should only go away when mouse leaves its area. How to do this?

Edit

Strange, the same code works on jsbin but not on my page: jQuery version is also same.

http://jsbin.com/epifu3

it is normal that it disappears, because, when you click on element1, your mouse is on element1, therefore, not on element2( '#' + rel_value).

Try this instead: add a class (example:"tobeShown") to all the elements that have the id you set normally via your '#' + rel_value, and attach the hover() behaviours to them separately from your click function.

$('.tobeShown').hover(function(){}, function(){
        $(this).fadeOut('slow');
    });

$('.user_info').click(function(){
    var pos = $(this).offset();
    rel_value = $(this).attr('rel');

    $('#' + rel_value).css({top: pos.top + 'px', left: pos.left + 'px'});
    $('#' + rel_value).show('slow');
    return false;
});

Have you tried replacing hover with mouseleave?

.hover() fires for any container leave action as well, it's equivalent to mouseleave in your case. Have you tried the vanilla .mouseout() event instead?

$('#' + rel_value).mouseout(function(){
    $(this).fadeOut('slow');
});

It's hard to say exactly without seeing the markup, but not using jQuery's custom event for this seems more of what you're after.