0

I have images in divs and I would like to have paragraphs to appear on top of them on mouseover, using jQuery. The paragraphs are initially hidden.

I've tried the following but can't make the paragraph to appear only when I mouseover one image, on top of that image only.

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'); 然后，您可以将文本直接放在那里，除非您真的需要它们，否则无需 P 元素标签，因为您可以在 CSS 中指定 DIV 本身的文本定位，而不会影响 IMG 元素。

如果您想了解有关定位和浮动和块元素的更多信息，这是一个很好的主题教程：http ://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should -知道/。请记住，如果要浮动元素，请始终设置宽度和高度。

于 2012-04-07T01:47:55.293 回答