Question

我有这个剧本：

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

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

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

弹出链接是一个小“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();                            
});

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

这里有人可以帮助我吗？

Answer 1

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

你的回调问题是，你在调用.shoutBox之前隐藏了所有.toggle()，这将导致mouseleave处理程序首先隐藏当前元素，并且因为在它之后调用toggle它将被显示再次

你需要

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

Answer 2

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

Answer 3

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

弹出在onmouseout时消失

3 个答案: