JQuery：无法弄清楚错误

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.

当我点击类user_info的链接时,它显示由'#'+ rel_value标识的div。问题是div显示但同时淡出($(this).fadeOut('slow');)即使我在mouseout参数中指定了这个。

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

我想要的是当鼠标离开它的区域时div才会消失。这个怎么做?

Thanks

Edit:

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

奇怪的是,相同的代码适用于jsbin但不适用于我的页面:jquery版本也相同。

http://jsbin.com/epifu3

3 个解决方案

#1

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

它消失是正常的,因为当你点击element1时,你的鼠标在element1上,因此,不在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.

请尝试这样做:通过“#”+ rel_value将一个类(例如:“tobeShown”)添加到具有您通常设置的id的所有元素,并将click()行为与click函数分开添加。

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

#2

Have you tried replacing hover with mouseleave?

你有没有尝试用mouseleave替换悬停?

#3

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

.hover()会触发任何容器离开动作,它相当于你的情况下的mouseleave。您是否尝试过vanilla .mouseout()事件?

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

没有看到标记就很难确切地说,但是没有使用jQuery的自定义事件,这似乎更像是你所追求的。

#1