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()イベント ハンドラーはコールバック メソッドを受け取ります。最初のメソッドはマウスの入力時に呼び出され、2 つ目のメソッドはマウスから離れたときに呼び出されます。2 番目のコールバックが提供されていない場合、最初のメソッドはマウスを離したときにも呼び出されます。

.shoutBoxコールバックの問題は、呼び出す前にすべて.toggle()を非表示にしているため、mouseleave ハンドラーが最初に現在の要素を非表示にし、その後トグルが呼び出されるため、再び表示されることです。

あなたが必要

$('.infoLink').hover(function(){
    $('.shoutBox').hide();
    $(".shoutBox" + this.id).show();                          
}, function(){
    $(".shoutBox" + this.id).hide();                          
});
于 2013-07-29T08:03:16.123 に答える
0

hover() イベント ハンドラーには、引数として 2 つの関数が必要です。あれは

$(".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 に答える