0

これはおそらく簡単な質問ですが、いくつかの方法を試した後、アドバイスが必要です。

いくつかの div があります。カーソルを合わせると、div ごとに異なるコンテンツを持つ別の div (ツールチップのように機能) が表示されます。私が提供したjsFiddleは、赤いdivでその例を示しています。私がjQueryを介して達成しようとしているのは、divのコンテンツを表示する他のdivにカーソルを合わせたときです。

現時点では、2 つの div (青と赤) があり、提供されている jQuery を使用して赤でのみ動作させることができます。これは複数の div に対してどのように機能しますか?

ツールチップ プラグインを簡単に使用できたはずですが、この例を anther プラグインで使用しており、スライダー内のツールチップと非常に競合します。

http://jsfiddle.net/DeRx8/1/

 $('.red').hover(function () {
        $(".tooltip").fadeIn(250);
    }, function () {
        $(".tooltip").fadeOut(250);
    });

誰かが私をどこから始めればよいか教えてくれるなら、それは素晴らしいことです.

ありがとう

PS * 赤、黒、ピンク、緑など 10 個以上の div を作成する予定です。

4

3 に答える 3

3

マルチセレクター付き

$(document).ready(function () {
    $('.red, .blue').hover(function () {
        $(".tooltip").fadeIn(250);
    }, function () {
        $(".tooltip").fadeOut(250);
    });
});

デモフィドル

于 2013-07-04T14:46:47.733 に答える
2

できるよ 

$(document).ready(function () {
$('.red,.blue').hover(function () {
    $(this).next(".tooltip").fadeIn(250);
}, function () {
    $(this).next(".tooltip").fadeOut(250);
});
});

http://jsfiddle.net/DeRx8/3/UPDATE
_ 

$(document).ready(function () {
$('.red,.blue').hover(function () {
    var left=$(this).offset().left+$(this).width()-40;
    $(this).next(".tooltip").css("left",left).fadeIn(250);
}, function () {
    $(this).next(".tooltip").fadeOut(250);
});
});

位置.tooltip
http://jsfiddle.net/DeRx8/5/

于 2013-07-04T14:48:33.347 に答える