2

问题

我正在尝试做一个效果，当用户鼠标悬停时会出现一个弹出窗口。然后将焦点设置在该弹出窗口上。当用户对所述弹出窗口进行聚焦时，它就会消失。

例子

您可以在下面查看一个工作示例，但您需要在用户名和密码字段中以“testuser”身份登录。登录后将鼠标悬停在登录框上，将出现一个弹出窗口，告诉您您已经登录。

http://www.steelfrog.com

一旦用户从中移除焦点，我希望该弹出窗口淡出，因为它包含一个注销按钮。

目前...

到目前为止我所拥有的：

$('.disabled').hover (
    function () { $('#bubble_logged').fadeIn(300); },
    function() { $('#bubble_logged').focus(); }
    );

$('#bubble_logged').focusout ( function () { $('#bubble_logged').fadeOut(300); } );

显然，这是无效的，或者有些东西我没有正确掌握。我对 jQuery 很陌生，所以启蒙会很棒！

[编辑]如果你有更好的方法来做这件事，顺便说一句，我全神贯注！

4

3 回答 3

4

您需要使用本机 javascriptfocus()方法。您不能直接在 jQuery 对象上使用它，因为该对象不仅仅引用 DOM 元素。

选择器$('#bubble_logged')将返回一个 jQuery 对象，其中包含 ID 为“bubble_logged”的所有项目。应该只有一个，但 jQuery 不在乎。所以，我们需要找到这个集合中的第一个（也是唯一一个）项目。您可以使用$('#bubble_logged').get(0)或来做到这一点$('#bubble_logged')[0]。一旦你这样做了，你就有了对你正在寻找的 DOM 元素的引用。

因此，我们添加 a.focus()以将焦点移至该元素。$('#bubble_logged').get(0).focus();请注意，这将尝试聚焦 #bubble_logged 元素。如果那是一个div，它不会做太多。如果您尝试将某个元素聚焦在该容器内，则需要调用 focus 来代替。

对于.hover()jQuery 方法，您为其提供了两个匿名函数。第一个是 hoverIn 事件处理程序，第二个是 hoverOut 事件处理程序。我相信您希望弹出窗口淡入，然后设置焦点。为此，请将这两个逻辑部分放在第一个事件处理程序中。

$('.disabled').hover (
    function () { 
        $('#bubble_logged').fadeIn(300, function(){
            //this is executed once the fadein is complete
            $('#bubble_logged')[0].focus();
        }); 
    },
    ...
);

然后，当调用 hoverOut 方法时，您可能想要淡出弹出窗口。只需添加以下内容。

$('.disabled').hover (
    ...
    function () { 
        $('#bubble_logged').fadeOut(300);
    }
);

最终的脚本看起来像这样。

$('.disabled').hover (
    function () { 
        $('#bubble_logged').fadeIn(300, function(){
            //this is executed once the fadein is complete
            $('#bubble_logged')[0].focus();
        }); 
    },
    function () { 
        $('#bubble_logged').fadeOut(300);
    }
);
于 2010-07-29T14:05:33.690 回答
1

我可能会这样写：

$('.disabled').mouseenter(function()
{
 $('#bubble_logged').fadeIn(300);
 $('#bubble_logged').focus();
}); 

$('#bubble_logged').focusout(function () 
{ 
  $(this).fadeOut(300); 
});

替代方案：（淡入淡出完成后的焦点）

$('.disabled').mouseenter(function() 
{ 
 $('#bubble_logged').fadeIn(300, function()
 {
   $('#bubble_logged').focus(); 
 });
});  

$('#bubble_logged').focusout(function ()  
{  
  $(this).fadeOut(300);  
});

EDIT2：有时，我也将其视为：

$('#bubble_logged').blur(function ()   
{   
  $(this).fadeOut(300);
  $(this).hide();
});
于 2010-07-29T14:02:39.897 回答
0

尝试更改focusout为blur.

于 2010-07-29T13:59:11.957 回答