1

この質問のタイトルについて申し訳ありませんが、それはあまり明確ではありませんが、それをどのように説明するのかわかりませんでした！

基本的に私が抱えている問題はこれです。トレーニングコースの登録フォームを作成しています。追加情報でホバー時にdivを開くヘルプ画像がいくつかあります。div自体にカーソルを合わせても、ヘルプボックスを開いたままにしておく必要があります。現時点では、ヘルプ画像から離れるとdivが閉じ、ボックス内のリンクをクリックできなくなります。ヘルプ画像またはdivにカーソルを合わせると、divは開いたままにしておきますが、ページの別の部分に移動すると閉じるようにします。

HTMLはここにあります：

<a href="#" id="pohelplink" class="helplinks">
 <img src="images/help.png" class="helpimage" id="pohelpimage" />
</a>
<div class="helpbox" id="pohelp">
 <h4>Purchase Order</h4>
 <p>If your company requires purchase orders to be raised, we'll need to know the PO Number so we can include it on our invoice. Please type the number into this box.</p>
 <p>If your organisation doesn't use purchase orders then you can simply leave this area blank.</p>
</div>

そしてJquery：

$("#pohelplink").hover(function(){
 $("#pohelplink").css({"z-index":"1110"});
 $("#pohelp").fadeIn();
 },
function(){
 $("#pohelp").fadeOut();
 $("#pohelplink").css({"z-index":"1095"});
});

どんな助けでも大歓迎です。

PS z-indexの変更は、ヘルプdivがポップアップしたときに、2つが重なっているため、ヘルプ画像を表示したままにすることです。私はそれがこの特定の問題に関連するとは思わないが、完全を期すためにそれを含めたかった。

ありがとう！

4

3 に答える 3

4

次のコードで問題が解決する場合があります：jsfiddle

    $("#pohelplink, #pohelp").mouseenter(function () {// show pohelp 
        $("#pohelplink").css({
            "z-index": "1110"
        });
        $("#pohelp").fadeIn();
    });
 $("#pohelp").mouseleave(function(){ // show pohelp tile mouseleave from pohelp
       $("#pohelp").fadeOut();
      $("#pohelplink").css({"z-index":"1095"});
});​
于 2012-10-08T12:16:00.743 に答える
1

これについては、 jQueryHoverIntentプラグインを参照してください

于 2012-10-08T12:11:47.187 に答える
0

このような

  $("#pohelplink,#pohelp").hover(function(){
     $("#pohelplink").css({"z-index":"1110"});
     $("#pohelp").fadeIn();
     },
    function(){
     $("#pohelp").fadeOut();
     $("#pohelplink").css({"z-index":"1095"});
    });​

このデモを確認してください

于 2012-10-08T12:14:49.760 に答える