0

問題は、このフィドルに関連しています: http://jsfiddle.net/k3QAC/1/私の友人と私はプロジェクトを行っています

次のような 3 つの同一のセクション タグがあります。

<section id="1">
 <h3>This is a heading.</h3>
 <p>This is 1 of 1 p tags.</p>
 <p>This is 1 of 2 p tags.</p>
 <p>This is 1 of 3 p tags.</p>
</section>
<section id="2">
 <h3>This is a heading.</h3>
 <p>This is 1 of 1 p tags.</p>
 <p>This is 1 of 2 p tags.</p>
 <p>This is 1 of 3 p tags.</p>
</section>
<section id="3">
 <h3>This is a heading.</h3>
 <p>This is 1 of 1 p tags.</p>
 <p>This is 1 of 2 p tags.</p>
 <p>This is 1 of 3 p tags.</p>
</section>

私の Fiddle で H3 タグのいずれかにカーソルを合わせると、 < p > タグがまったく同じ場所に表示されるようにします。同様に、セクション #1 h3 を超えている場合、p タグは先頭から表示されます。セクション #2 h3 にカーソルを合わせると、p タグがまったく同じ場所に表示されます。セクション #3 h3 と同じ。

4

3 に答える 3

2

表示されている段落を常にページの上部、見出しのリストの横に表示する場合position: absolute;は、pタグで使用top: 0;し、さらに使用します。タグの位置を使用しないため、段落left: 25%;はタグに配置されません。sectionドキュメントに関連して配置されます。に関連して段落を表示したい場合は、タグsectionに追加position: relative;するだけです。section

section p { 
  position:absolute;
  left:25%;
  top: 0;
  width:75%;
  display: none;
}

デモ1： http: //jsfiddle.net/qemuK/

ただし、ルールsection h3:hover + pは。に続く最初の段落にのみ適用されますh3:hover。設計どおり、各セクションの2番目と3番目の段落は常に非表示になります。3つの段落すべてを表示するには、段落自体ではなく、それらを別の要素でラップして、その要素を表示/非表示にする必要があります。

<section>
  <h3> This is a heading</h3>
  <div class="paragraphs">
    <p>1 1 This is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id tortor nulla, in placerat ligula. Fusce magna turpis, consequat ut tempus quis, elementum varius</p>
    <p>1 2 This is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id tortor nulla, in placerat ligula. Fusce magna turpis, consequat ut tempus quis, elementum varius</p>
    <p>1 3 This is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id tortor nulla, in placerat ligula. Fusce magna turpis, consequat ut tempus quis, elementum varius</p>
  </div>
</section>

そしてCSS：

section .paragraphs { 
    position:absolute;
    left:25%;
    top: 0;
    width:75%;
    display: none;
}

section h3:hover + .paragraphs {
    display:block;
}

デモ2： http: //jsfiddle.net/YcDuu/

于 2012-07-29T15:26:55.847 に答える
1

私があなたを正しく理解しているなら、この更新された Fiddleを試してください。pタグは の子であるためsection、section相対的な配置が必要なのは見出しではなく です。

于 2012-07-29T15:23:52.760 に答える
1

または: http://jsfiddle.net/k3QAC/2/

于 2012-07-29T16:28:22.810 に答える