如何在兄弟姐妹的悬停中显示元素？

Question

我一直在测试CSS选择器.我想改变p我悬停时的显示h3,所以我写了类似的东西:

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>