1

次のように、jquery で for ループが必要です。

"すべての hover_link について: hovered hover_link の横に非表示の div を表示します。"

現在のjqueryは、非表示のdivを表示せず、ホバーされたリンクの隣に非表示のdivを配置するだけでなく、複数のhover_linksに対してこれをループする方法を理解できません。

jquery:

$(document).ready(function() {
    $(".hover_link").mousemove(function(e) {
        $("#box1").show();
        $(".box").css({
            top: ($(".hover_link").offset().top() + 10) + "px",
            left: ($(".hover_link").offset().left() + 10) + "px"
        });
    });
    $(".hover_link").mouseout(function(e) {
        $("#box1").hide();
    });
});​

フィドル: http://jsfiddle.net/3kWq7/1/

助けてくれる人に感謝します

4

2 に答える 2

1

mousemove を mouseenter に置き換えます

理想的には（http://api.jquery.com/on/）で使用したい

より動的にするために、特定の領域に表示するボックスの ID を含むことができる領域に rel 属性を追加できます。次に、 rel 属性を取得して、対応するボックスを表示するだけです

アップデート

area タグの html に rel を追加し、.on() を使用してマウス ハンドラを記述しました。コメントを入れたので、何が起こっているのか理解していただければ幸いですhttp://jsfiddle.net/3kWq7/3/

于 2012-06-26T15:38:00.997 に答える
0

それで！結局のところ、問題は、ページの中央に固定された幅のdiv内にあるdivでjqueryを実行していたことでした。

これを回避するために、基本的にhtmlドキュメントの幅を検出し、divの固定幅を減算し、残りを2で割って、非表示のdivをポップするためにマウス計算をオフセットするために必要な左マージンを取得しました。ウィンドウサイズに関係なく、マウスの横に表示されます。

サイトのヘッダーも固定サイズであるため、マウスの位置から高さを差し引いて、非表示をdivに設定し、他の軸に正しく配置しました。

forループは必要ではなかったので、ホバーしたリンク領域に応じて異なる非表示のdivをポップアップさせるために、rel="boxID"属性を使用して@Huangismからの提案を実装しました。（@Hunagismに感謝します！）

最終的なフィドル：http：//jsfiddle.net/3kWq7/10/

最終結果： http： //jsfiddle.net/3kWq7/10/embedded/result/

最終的なjquery：

$(document).ready(function(){
    $(".hover_link").mousemove(function(e){         
        $($(this).attr('rel')).show();
        var padding = parseInt(jQuery("#page").css("margin-right"));
        var margin = $(document).width() - 900;
        var marginleft = margin / 2;        
            $(".box").css({             
            top: (e.pageY - 200) + "px",             
            left: (e.pageX - marginleft + 10) + "px"        
        });    
    });     
    $(".hover_link").mouseout(function(e){         
        $($(this).attr('rel')).hide();   
    });
});
于 2012-06-27T10:55:26.367 に答える