仅使用CSS，在<a>上方悬停时显示div

Question

仅使用CSS，在<a>上方悬停时显示div

我想显示一个div当有人徘徊在<a>元素，但我希望使用CSS而不是JavaScript来实现这个功能。你知道如何才能做到这一点吗？

Answer 1

你可以这样做这，这个:div {&nbsp; &nbsp; display: none;}&nbsp; &nbsp;&nbsp;a:hover + div {&nbsp; &nbsp; display: block;}<a>Hover over me!</a><div>Stuff shown on hover</div>这使用相邻同胞选择器，并且是吸盘鱼下拉菜单.HTML 5允许锚元素包装几乎任何东西，因此在这种情况下，div元素可以成为锚的子元素。否则，原则是相同的-使用:hover类更改display另一个元素的属性。

Answer 2

.showme {&nbsp; display: none;}.showhim:hover .showme {&nbsp; display: block;}<div class="showhim">HOVER ME&nbsp; <div class="showme">hai</div></div>小提琴既然这个答案很流行，我想需要一个小小的解释。使用此方法，当您在内部元素上悬停时，它不会消失。因为.showme位于.showhim中，所以当您在两行文本之间移动鼠标(或其他任何内容)时，它不会消失。这些是你在实现这种行为时需要注意的怪癖的例子。这完全取决于你需要这个做什么。此方法更适合于菜单样式场景，而奕江更适合做工具提示。