如何显示一个元素悬停的兄弟姐妹？

我一直在测试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>

，但它不工作。这是什么错误？我错过了什么？

来源

2017-09-04 Rıfat Tolga Kiran

@kukkuz你不必是最近编辑得到朝照明徽章进步，只是* *的编辑器。另外，问题中的“但”不是句子的开头，所以不应该大写。 – TylerH

@TylerH不打算成为最近的编辑......我想'但'必须大写..好吧，让它成为:) – kukkuz

使用+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

如果在不久的将来计划有比General sibling selector ~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>

来源

2017-09-04 16:38:49

可以使用相邻兄弟选择器（+），如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>

来源

2017-09-04 16:39:35 kukkuz

如何显示一个元素悬停的兄弟姐妹？

回答

相关问题