如何在兄弟姐妹的徘徊中显示一个元素

Question

我一直在测试CSS选择器。当我悬停h3时，我想更改p的显示，所以我写了类似的内容：

div > p{
    display: none;
}
div > h3:hover p{
    display: block;
}

<div>
    <h3>Lorem ipsum dolor sit amet</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

但它行不通。这怎么了？我想念什么？

Answer 1

使用+相邻同胞选择器

div > p {
  display: none;
}
div > h3:hover + p {
  display: block;
}

<div>
  <h3>HOVER ME</h3>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

回顾
h3 p ...表示p是h3的后代
h3 + p ...表示p是h3

的下一个兄弟姐妹

---

如果您计划在不久的将来与h3和p之间的其他元素，而不是一般的兄弟姐妹选择器~可以帮助

div > p {
  display: none;
}
div > h3:hover ~ p {    /* notice the general sibling selector */
  display: block;
}
.line{background: red; height: 1px; }

<div>
  <h3>HOVER ME</h3>
  <div class="line"></div>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

Answer 2

您可以使用相邻的兄弟姐妹选择器（+），例如div > h3:hover + p。

请参见下面的演示：

div>p {
  display: none;
}
div>h3:hover+p {
  display: block;
}

<div>
  <h3>Lorem ipsum dolor sit amet</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>