JQuery: Can't figure out the error

Question

Hello,

I have this code:

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

    $('#' + 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?

Thanks

Edit:

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

http://jsbin.com/epifu3

Answer 1

Have you tried replacing hover with mouseleave?

Answer 2

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

Answer 3

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