Question

问题与这个小提琴有关：http://jsfiddle.net/k3QAC/1/我的朋友和我正在做一个项目

我有三个相同的部分标签，如下所示：

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

当你将鼠标悬停在我的小提琴中的任何一个H3标签上时，我想要＆lt; p>标签显示在完全相同的位置。如果你已超过＃1 h3部分，则p标签从顶部开始显示。如果将鼠标悬停在第2节h3上，则p标签显示在完全相同的位置。与第3节h3相同。

Answer 1

如果您希望可见段落始终显示在页面顶部，在标题列表旁边，您希望在position: absolute;标记上使用p，并使用{{1}除了top: 0;之外，您不会在left: 25%;标记上使用任何定位，以便将段落放置在与文档相关的位置。如果您希望显示与section相关的段落，只需将section添加到position: relative;代码

section

演示1：http://jsfiddle.net/qemuK/

但是，您的规则section p { position:absolute; left:25%; top: 0; width:75%; display: none; }仅适用于section h3:hover + p之后的第一段。按照设计，每个部分的第2和第3段将始终不可见。要显示所有三个段落，您需要将它们包装在另一个元素中并显示/隐藏该元素，而不是段落本身。

h3:hover

CSS：

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

演示2：http://jsfiddle.net/YcDuu/

Answer 2

如果我理解正确，请尝试this updated Fiddle。 p代码是section的子代，因此section需要相对定位，而不是标题。

Answer 3

或者：http://jsfiddle.net/k3QAC/2/

CSS定位 - 绝对/相对/？

3 个答案: