Question

我想创建一个div，当有人将鼠标放在第一段时，它会扩展为两段。第一段将是一个介绍。第二段将解释更多，可能包含指向另一页的链接。我希望隐藏第二段，直到该人对介绍性段落进行了抄袭。我的背景图像看起来像便利贴。

我在此尝试：http://jsfiddle.net/sAW2c/52/。第二段没有被隐藏，即使我约束了div的大小而且P上的填充也不起作用。有人能指引我走向正确的方向吗？

Answer 1

将overflow: hidden;添加到#div1似乎可以解决问题：little link。

注意：下次请使用jsFiddle的CSS标签。内联样式通常不是很好。

Answer 2

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

<强>的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>

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

2 个答案: