Question

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?

Edit

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

http://jsbin.com/epifu3

Answer 1

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