如何创建在鼠标悬停时扩展更多信息的div（带有背景图片？

Question

我想创建一个div，当有人将鼠标悬停在第一段上时，它会扩展为两个段。 第一段是引言。 第二段将说明更多内容，并可能包含指向另一页的链接。 我希望隐藏第二段，直到该人将鼠标悬停在介绍段上。 我有一张看起来像便利贴的背景图片。

我在这里的尝试是： http : //jsfiddle.net/sAW2c/52/ 。 即使我限制了div的大小并且P上的填充也不起作用，第二段也没有隐藏。 有人可以指引我正确的方向吗？

Answer 1

添加overflow: hidden; 您的#div1似乎可以解决此问题： 小链接 。

注意：下次请使用jsFiddle的CSS标签来设置样式。 通常，内联样式不是很可取。

Answer 2

将隐藏的溢出添加到div应该会有所帮助。 看看这个jsFiddle示例 。 您应该在这里得到基本的想法，但是您需要调整背景和文本填充。

jQuery的

$("#div1").hover(function() {
    $(this).animate({
        height: '300px'
    });
}, function() {
    $(this).animate({
        height: '100px'
    });
});​

HTML

<div id="div1" style="height:120px; width:206px;overflow:hidden;background: url('http://quiltersbee.com/images/white-postit.png') no-repeat 0 0; ">
    <p style="padding-left: 8;padding-right: 8;">This is the paragraph that I would like to be only 190px wide and placed on the background image.  It should be left-aligned. </p><br />
    <p style="padding-left: 8;padding-right: 8;">This is the paragraph I would like to hide until someone mousesovers the above paragraph.  Both paragraphs should be indented so they don't overlap the shading on the background image when this paragraph shows.  This paragraph may include a link.</p>
</div>​