1

当有人将鼠标悬停在第一段上时，我想创建一个扩展为两段的 div。第一段是介绍。第二段将解释更多，可能包含指向另一个页面的链接。我希望隐藏第二段，直到人们将鼠标悬停在介绍性段落上。我有一个看起来像便利贴的背景图片。

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

4

2 回答 2

1

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

注意：下次请使用 jsFiddle 的 CSS 选项卡设置样式。内联样式通常不是很可取。

于 2012-09-09T15:44:27.513 回答
0

添加隐藏到 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>​
于 2012-09-09T15:44:30.013 回答