1

誰かが最初の段落の上にマウスを置くと、2 つの段落に展開される div を作成したいと思います。最初の段落は導入になります。2 番目の段落ではもう少し説明があり、別のページへのリンクが含まれている場合があります。人が導入段落の上にマウスを置くまで、2 番目の段落を非表示にしたいと思います。付箋のような背景画像があります。

これに対する私の試みはここにあります: http://jsfiddle.net/sAW2c/52/。div のサイズを制限し、P のパディングも機能していなくても、2 番目の段落は非表示になりません。誰かが私を正しい方向に導くことができますか?

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 に答える