0

jQueryでツールチップ効果を取得しようとしていますが、希望どおりに機能していません。

$(".product").mouseover(function() {
    $(this).find(".description").fadeIn(300);
}).mouseleave(function() {
    $(this).find(".description").stop().fadeOut(300);
});

.productは親要素、.descriptionは子要素です。

これは私が取り組んでいるページです。ツールチップ（.description）にカーソルを合わせても表示されたままにする必要があります。私はそれを機能させることに成功しましたが、ツールチップが別の親要素の座標と重なると（.product結局、関数をトリガーします）、ツールチップは消えます。

誰かが私を正しい方向に動かすことができますか？私はここでstackoverflowについてたくさん読んだことがありますが、同様の質問がたくさんありますが、それらの提案された解決策は私にはうまくいかないようです。どんな親切な魂もここでJavaScriptの馬鹿を助けることができますか？

4

3 に答える 3

1

z-indexツールチップを何かに設定してみてください999999：

<dd class="description" style="opacity: 1; display: block; z-index: 999999; ">
    Avocado op een bootje van rijst en zeewier
    <span class="social">FB | Twitter</span>
</dd>

dd.descriptionこれらの画像よりも高いz-indexがあることを確認してください。

于 2012-07-25T06:34:58.110 に答える
0

私がすることはmouseleave、マウスがに入るときに関数のバインドを解除し.description、マウスがから離れるときに関数を再バインドすること.descriptionです。テスト済みのツールチッププラグインを使用する方が簡単（そしてバグが少ない）かもしれませんが（トンがあります）。

于 2012-07-25T06:35:48.763 に答える
0

position:relative設定してみてくださいdd.productWrap

あなた<dl>が持っていdisplay: table-callます。position:relativeこれはあまりにもそれを適用することを防ぎます

于 2012-07-25T06:38:23.817 に答える