0

divに画像があり、jQueryを使用して、マウスオーバー時に段落をその上に表示したいと思います。段落は最初は非表示になっています。

次のことを試しましたが、1つの画像の上にマウスを置いたときにのみ、その画像の上に段落を表示させることはできません。

HTML：

<div id="photos">

    <div class="test">
        <img src="http://www.blset.com/img/300x200/biostat300200.jpg" />
        <p class="desc">Test 1</p>
    </div>

    <div class="test">
        <img src="http://www.blset.com/img/300x200/barometre1300200.jpg" />
        <p class="desc">Test 2</p>
    </div>
</div>

CSS：

#photos {position:relative;width:100%;height:100%;background:#ccc;}

#photos img {float:left;height:120px;}

#photos p {display:none; position:absolute;top:0;left:0;}

jQuery：

$(".test img").hover(function() {

        $(".test p").fadeIn(200);
    }, function () {

        $(".test p").fadeOut(200);

    });

jsFiddle： http: //jsfiddle.net/m7zFb/13/

4

2 に答える 2

1

これを試して：

$(".test img").hover(function(e) {
    $(e.target).next().fadeIn(200);
}, function (e) {
    $(e.target).next().fadeOut(200);
});

次のCSSを使用します。

.test { float: left;position: relative; }

#photos {position:relative;}

#photos img {height:120px;}

#photos p {display:none; position:absolute;top:0;left:;}

jsFiddle：

于 2012-04-07T01:29:55.773 に答える
0

この方法でセットアップすると、Pなどのブロック要素がDIV要素に含まれないため、これには問題があるように見えます。また、絶対配置用にP要素を設定していますが、包含要素の配置を定義していません。したがって、Pはビューポートに対して相対的な位置に配置されます。

個人的には、テキストを画像の上に配置して少し単純にする場合は、画像をdivの背景として配置し、background-image：url（'imagepath'）;のようにします。次に、IMG要素に影響を与えることなくDIV自体のテキストの位置をCSSで指定できるため、本当に必要でない限り、P要素タグなしでテキストをそこに配置できます。

ポジショニングとフローティングおよびブロック要素の詳細が必要な場合は、このトピックに関する優れたチュートリアルです：http: //coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should -知っている/。要素をフロートさせる場合は、常に幅と高さを設定することを忘れないでください。

于 2012-04-07T01:47:55.293 に答える