HTML – 如何在兄弟姐妹的悬停上显示元素？

概述我一直在测试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, consec 我一直在测试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>

但它不起作用.这有什么不对？我错过了什么？

解决方法 使用 adjacent sibling selector

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之间的其他元素比General sibling selector ~更有帮助

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 ></div>  <p>Lorem ipsum dolor sit amet...</p></div>

总结

以上是内存溢出为你收集整理的HTML – 如何在兄弟姐妹的悬停上显示元素？全部内容，希望文章能够帮你解决HTML – 如何在兄弟姐妹的悬停上显示元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。