Question

问题

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

示例

您可以在下面查看一个工作示例，但您需要在用户名和密码字段中以“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很新，所以启蒙会很棒！

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

Answer 1

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

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

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

对于.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方法时，您可能希望fadeOut弹出窗口。只需添加以下内容即可。

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

Answer 2

我可能会把它写成：

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

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

替代方案:(在fadein完成后关注）

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

Answer 3

尝试将focusout更改为blur。

设置jQuery焦点

3 个答案: