0

次の jQuery スクリプトを使用しています。

$("#divid").mouseenter(function() {
    $('#divid').show(1000);
}).mouseleave(function() {
    $('#divid').hide(1000);
});
$("#hldiv").mouseenter(function() {
    $('#divid').show(1000);
}).mouseleave(function() {
    $('#divid').hide(1000);   
});

ご覧のとおり、 というハイパーリンクの上にマウスを置くと#hldiv、#dividが表示されます。主な目標はDIV、マウスが上にある場合に表示を維持することですDIVが、#divid最初は表示されるべきではありません。

マウスがハイパーリンク上に移動すると がDIV表示され、マウスが の上に移動するとDIV、マウスが離れるまで表示されたままになります。

問題は、現在のコードでは、ユーザーがハイパーリンクの上を移動しDIVてから外に出ると、正しく表示/非表示になりますが、ユーザーがハイパーリンクの外に移動してDIVそれ自体の上に移動すると、DIVも消えます。

これを修正するにはどうすればよいですか?

4

3 に答える 3

1

コンテナを追加して、次のことを行ってみませんか。

<div id='container'>
<a ID="hlDiv">hlink</a>
<div ID="divId">Test Test Test</div>
</div>

$(document).ready(function() {
    $("#hlDiv").hover(function() {
        $('#divId').show(1000);
    })
        $('#container').mouseleave(function(){
            $('#divId').hide(1000);
        });
});

ここでフィドル：http：//jsfiddle.net/w68YX/8/

于 2011-07-18T09:46:54.900 に答える
0

私はこのパーティーに非常に遅れていますが、これを行うにははるかに良い方法があるので、将来のブラウザのために追加したいと思います。この効果のためにjQueryはまったく必要ありません。

まず、2つのアイテムをコンテナーにラップし（ここでは、クラスでdivを使用していcontainerます）、hoveで表示/非表示にするアイテムにクラスを適用します（ここでは、要素でshow-on-hoverクラスを使用しています）。#divId

<div class="container">
  <a id="hlDiv" href="...">link text</a>
  <div class="show-on-hover" id="divId">popup stuff</div>
</div>

次に、CSSを次のように設定します。

.container > .show-on-hover { display: none; }
.container:hover > .show-on-hover { display: block; }

#divId { /* whatever styles you want */ }

その結果、ホバーは完全にCSSによって制御されるようになりましたが、元々の1sトランジションはありません。これはもう少し複雑です（現在、IEでは機能しませんが、IE10以降でサポートされる予定です）。

CSSを次のように変更するだけです。

.container { position: relative; }
.container > .show-on-hover { opacity: 0.0; position: absolute; }
.container:hover > .show-on-hover { opacity: 1.0; }

.show-on-hover {
    -webkit-transition: opacity 1s; /* Chrome / Safari */
    -moz-transition: opacity 1s;    /* Firefox */
    -o-transition: opacity 1s;      /* Opera */
}

相対的な配置とは.container、コンテナが子要素とその配置に独自の境界ボックスを設定することを意味します。つまり、> .show-on-hoverスタイリングをposition: absolute;に設定すると、その親に制限されたままになります（例として設定した場合、画面ではなく、left: 0;の左端に移​​動します）。.container

トグルにより、絶対位置にあるアイテムが配置された場所に表示/非opacity表示になります（CSSを更新して、ハイパーリンクに対して希望の場所に正確に配置します）。使用しなくなったため、非表示の場合でも（これはおそらく必要なものではありません）、常に画面上のスペースを占有しますdisplay: none。DIV

最後に、トランジションを設定する最後のブロックは、クラスの要素で不透明度が変化するたびに、.show-on-hoverその変化を1秒以上のトゥイーンとして発生させることを最新のブラウザーに通知します。

遷移を示すjsFiddleは次のとおりです。http：//jsfiddle.net/TroyAlford/nHrXK/2

そして、これがトグルだけを示すjsFiddleです：http：//jsfiddle.net/TroyAlford/nHrXK/3/

于 2013-03-07T18:20:42.143 に答える
0

私が正しく理解していれば、書き直します 

$("#divid").mouseenter(function() {
    $('#divid').stop(true);
    $('#divid').show(1000);
}).mouseleave(function() {
    $('#divid').hide(1000);
});

現在のアニメーションを停止し（フェードアウト）、フェードインするため（すでに少し透明になっている場合）、役立つ場合があります。

ただし、これは HTML に依存し、あなたのケースでは機能しない可能性があるため、構造も投稿してください。

于 2011-07-18T09:23:37.677 に答える