0

问题与这里的小提琴有关：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>

当您将鼠标悬停在我的 Fiddle 中的任何 H3 标签上时，我希望 < p > 标签显示在完全相同的位置。如，如果您有超过 section#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 段将始终不可见。要显示所有三个段落，您需要将它们包装在另一个元素中并显示/隐藏该元素，而不是段落本身。

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