0

我有这个脚本：

$(document).ready(function(){
            $('.infoLink').hover(function(){
            $('.shoutBox').hide();
            $(".shoutBox"+$(this).attr("id")+"").toggle();                          
            });

            $('.closeLink').click(function(){
            $(this).closest(".shoutBox").toggle();                   
            });
        });

我需要添加一点，以便当访问者停止将鼠标悬停在弹出链接上时弹出窗口会消失。

弹出链接是一个小“i”按钮：

<a href="javascript:void(0);" class="infoLink rollover" id="box1"><img width="12" height="11" border="0" src="../path/to/randomimage.png" alt="" title="" /></a>

我试图添加：

$('.infolink').onMouseOut(function(close){
$('.shoutBox').close();
$(".shoutBox"+$(this).attr("id")+"").toggle();                            
});

类似的东西......但正如你所理解的......这不起作用......

这里有人可以帮助我吗？

4

3 回答 3

1

.hover ()事件处理程序采用回调方法，第一个是在鼠标进入时调用，第二个是在鼠标离开时调用。如果未提供第二个回调，则鼠标离开时也会调用第一个方法。

您的回调的问题是，您.shoutBox在调用之前隐藏了所有内容，.toggle()这将导致 mouseleave 处理程序首先隐藏当前元素，并且由于之后调用切换，它将再次显示

你需要

$('.infoLink').hover(function(){
    $('.shoutBox').hide();
    $(".shoutBox" + this.id).show();                          
}, function(){
    $(".shoutBox" + this.id).hide();                          
});
于 2013-07-29T08:03:16.123 回答
1 
$('.infoLink').hover(function(){
            $('.shoutBox').hide();
            $(".shoutBox"+$(this).attr("id")+"").toggle();                          
            }, function() {
               $('.shoutBox').close();
               $(".shoutBox"+$(this).attr("id")+"").toggle();               
       });
于 2013-07-29T08:04:08.007 回答
0

hover() 事件处理程序必须有两个函数作为其参数。那是

$(".some-class").hover(function1(), function2());

其他人的回答是正确的。但是，如果您发现该语法令人困惑，您可以尝试

function mouseIn(){
    $('.shoutBox').hide();
    $(".shoutBox" + this.id).show();                          
}

function mouseOut(){
    $(".shoutBox" + this.id).hide();                          
}

现在您可以调用悬停事件处理程序。

$(".some-class").hover(mouseIn(), mouseOut());
于 2013-07-29T08:13:15.947 回答