1

マウスを画像の上に置いたときに、画像上に情報 (基本的には HTML) を表示できるようにしたい... .hover()jQuery 関数があることは知っていますが、目的の効果を得るためにそれを使用する方法がわかりません。

理想的には、ユーザーが画像にカーソルを合わせると、タイトルなどの HTML とともに「グレー表示」されます (たとえば、不透明度 50% の黒のレイヤー)。

誰かが私を正しい方向に向けたり、サンプルコードを提供したりできますか

ありがとう

4

2 に答える 2

9

これらの行に沿って何かを行うことができます:

次のように、画像と表示する div をラップします。

<div class="imgHover">
    <div class="hover">Test Content for the hover</div>
    <img src="myImage.jpg" alt="" />
</div>

次のような CSS を使用します。

.imgHover .hover { 
    display: none;
    position: absolute;
    z-index: 2;
}

最後に、jQuery は次の.hover()ように使用します。

$(".imgHover").hover(function() {
    $(this).children("img").fadeTo(200, 0.25)
           .end().children(".hover").show();
}, function() {
    $(this).children("img").fadeTo(200, 1)
           .end().children(".hover").hide();
});

ここで上記のコードを試すことができます

これにより、画像がフェードアウトし、<div>ホバーするとその上に表示されます。ラッピングは、 が の<div>真上に絶対に配置されるようにする<img>ためです。多くのラッピング コンテンツが必要な場合は、.hoverdiv に画像と同じサイズを指定します...依存するだけですあなたが目指している正確な外観に。

于 2010-05-03T22:01:10.913 に答える
-1

とにかく jQuery を使用している場合は、Tooltips プラグインが必要になる場合があります: http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

于 2010-05-03T21:42:21.197 に答える