0

クラス名avatarを持つ各 div に付属する非表示のコンテンツを表示するために、次の 2 つの方法を試しました。

<div class="avatar"><a><img src="avatar.png" width="36" height="36"><div class="profile">Users Profile with Link</div></a></div>

最初のものはホバーを使用し、ページに複数のアバター要素がある場合に完全に機能します。

残念ながら、ツール ヒントにはクリック可能なリンクが組み込まれており、ホバーしてもリンクをクリックすることはできません。

    $('.avatar a').hover(function () {
        $(this).contents('div:last-child').css({
            display : 'inline'
        });
    }, function () {
        $(this).contents('div:last-child').css({
            display : 'none'
        });
    });

残念ながら、ツール ヒントにはクリック可能なリンクが組み込まれており、ホバーしてもリンクをクリックすることはできません。

ここで見つけた、mouseenterとmouseleaveを使用するコーディングをつなぎ合わせました。これも機能し、リンクをクリックできます。

    var hover = null;
    $('.avatar a').bind('mouseleave', function() {
        var $this = $(this).contents('div:last-child');
        hover = setTimeout(function() {
            $this.fadeOut(400);
        }, 800);
    });

    $('.avatar a').bind('mouseenter', function() {
        $(this).contents('div:last-child').css({display:'block'});
        if (hover !== null) {
            clearTimeout(hover);
        }
    });

残念ながら、これらのアバターの複数の上にマウスを置いた場合、最後のアバターのみが削除され、他のアバターは常に残ります。

私の質問は、別のツール ヒントに移動するときにアクティブなツール ヒントをフェードアウトする 2 番目のものをどのように使用すればよいかということです。

何か不足していますか？または、これを完全に間違っていますか？

4

3 に答える 3

1

問題はタイムアウト機能にあります..なぜそれを使用しているのですか? http://jsfiddle.net/24MYq/9/ 削除:

    if (hover !== null) {
    clearTimeout(hover);
}

これはあなたが必要とするものではありませんか、それともその遅延が必要ですか? あなたが本当にそれを必要とするなら、私は私の投稿を編集し、あなたにいくらかの作業遅延を与えます.

E: 遅延の場合は、fadeOut() 内の数値を大きくするか、数値が int 値の場合に後で .delay(数値) を追加します (500 -> 0.5 秒)

于 2013-02-11T17:30:08.587 に答える
0

私が正しく理解していれば、あなたが望むのは、各ヒントにタイムアウトを設定することだと思います。.data各ヒントにタイムアウトを関連付けることで、これを実現できます。

$('.avatar a').on('mouseleave', function() {
    var $tip = $(this).contents('div:last-child');
    $tip.data('hover', setTimeout(function() {
        $tip.fadeOut(400);
        $tip.removeData('hover');
    }, 800));
});

$('.avatar a').on('mouseenter', function() {
    var $tip = $(this).contents('div:last-child').show();
    var hover = $tip.data('hover');
    if (hover) {
        clearTimeout(hover);
        $tip.removeData('hover');
    }
});

jsfiddle でのライブ デモ

注:は廃止されたため、にも変更.bind()し、 use に変更しました。.on().bind().show()

元のコードで起こっていたのは、2 番目のヒントにカーソルを合わせたときに最初のヒントのタイムアウトがクリアされたということです。それらはすべて同じ「ホバー」変数を共有していたからです。

編集:急いで.data値を誤ってクリアしていました。を使っていたはず.removeData()です。上記のコードを修正しました。

jsfiddle の更新されたデモ

于 2013-02-11T17:54:54.707 に答える
0

マウスを離したときにそれらをすべて削除したい場合は、次のように変更することで削除でき var $this = $(this).contents('div:last-child') ます var $this = $('.profile');

ただし、すべてのツールチップが同時に消え、別のアバター画像にマウスを合わせるたびにタイムアウトがリセットされます.

于 2013-02-11T17:30:18.337 に答える