0

OK、ここで非常にイライラします。やりたいことは複雑ではないことはわかっていますが、シンプルで素敵な答えが見つかりません。

画像にカーソルを合わせたときにポップアップウィンドウが必要です。ポップアップは画像の右側にある必要があります。
それでおしまい。

これは、クレジット カードの CVV# をまだ知らない場合に、その場所を示す画像を表示するために使用されます。

私が探しているものと他の 18 のものを同時に組み合わせたこれらすべてのサンプルを見つけ続けているため、初心者が jquery でそれらを整理することは不可能です。

それをメニューシステムに組み合わせたり、特定のタグのすべてのコピーにこのコードを適用したり、歌ったり踊ったりしたくありません。

ホバーをトリガーする画像は、変更したくないテーブル内にあるため、ポップアップは独自のDIVにある必要があると思います。

私はただ fu と言って、それを新しいブラウザー ウィンドウにポップアップ表示するまでに、約 2 インチ (海外の友人の場合は 5 cm) ほど離れています。私がこのようにしている理由は、その方がスタイルが良いと思うからです。また、jquery を学びたいからです。

誰かが私にそれを非常に簡単な言葉で説明できるなら、私はとても感謝しています. 角を丸くするなど、役立つと思われる他の機能を追加したい場合は、どのコードが何と一致するかを簡単に判断できる限り、それは問題ありません。

どうもありがとうございました。

4

2 に答える 2

11

このようなものかもしれません：

$('.popover').on({
    mousemove: function(e) {
        $(this).next('img').css({
            top: e.pageY - 260,
            left: e.pageX + 10
        });
    },
    mouseenter: function() {
        var big = $('<img />', {'class': 'big_img', src: this.src});
        $(this).after(big);
    },
    mouseleave: function() {
        $('.big_img').remove();
    }
});

デモンストレーション

または、JavaScript を使用せず、CSS のみを使用: FIDDLE

于 2013-03-29T00:06:31.480 に答える
1

うわー、冷静な男。

ここで私が使用することをお勧めするテクニックがあります。

ポップアップのコンテナとして<div>の末尾にaを追加します。http://jqapi.com/#p=append<body>

次に、ドキュメントに対して、設定する場所の位置を知る必要があります。jQuery のオフセットhttp://jqapi.com/#p=offsetを使用して、ホバーされた要素のオフセットを取得できます。

次に、ホバーされた要素の幅を計算し、CSS を使用してその横にポップアップを設定しposition: absoluteます。ポジショニング コンテキストを設定position:relativeするには、親要素にも設定するのがベスト プラクティスです。この場合は です<body>。ポップアップ コンテナの CSS 属性を設定する必要がありますtop。left

ホバー メカニズムに関する提案http://jqapi.com/#p=hover

関数の形式でホバー ハンドラーを作成する必要があります。「ホバーイン」用の 1 つの機能と「ホバーアウト」用のオプションの機能

ポップオーバーのブートストラップ実装があります 。

それが役立つことを願っています。

于 2013-03-29T00:02:10.117 に答える