Question

我有div中的图像，我想在鼠标悬停时使用jQuery显示段落。这些段落最初是隐藏的。

我尝试过以下操作，但只有在鼠标悬停在一张图片上时才能显示段落，仅在该图片的顶部。

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/

Answer 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：

http://jsfiddle.net/m7zFb/15/

Answer 2

这看起来有问题，因为在以这种方式设置时，像P这样的块元素不会包含在DIV元素中。此外，您已将P元素设置为绝对定位，但尚未定义包含元素的位置。因此，您的P最终会相对于视口定位。

就个人而言，如果你希望文本位于图像的顶部并使其更简单：我会将图像作为div的背景，使background-image：url（'imagepath'）;然后你可以直接在那里填充你的文本，除非你真的需要它们，因为你可以在CSS中指定DIV本身的文本定位，而不会影响IMG元素。

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

在图像鼠标悬停上显示段落

2 个答案: