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

Question

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

Answer 1

你可以这样做这，这个:

div {

    display: none;

}

    

a:hover + div {

    display: block;

}

<a>Hover over me!</a>

<div>Stuff shown on hover</div>

这使用相邻同胞选择器，并且是吸盘鱼下拉菜单.

HTML 5允许锚元素包装几乎任何东西，因此在这种情况下，div元素可以成为锚的子元素。否则，原则是相同的-使用:hover类更改display另一个元素的属性。

Answer 2

.showme {

  display: none;

}

.showhim:hover .showme {

  display: block;

}

<div class="showhim">HOVER ME

  <div class="showme">hai</div>

</div>

小提琴

既然这个答案很流行，我想需要一个小小的解释。使用此方法，当您在内部元素上悬停时，它不会消失。因为.showme位于.showhim中，所以当您在两行文本之间移动鼠标(或其他任何内容)时，它不会消失。

这些是你在实现这种行为时需要注意的怪癖的例子。

这完全取决于你需要这个做什么。此方法更适合于菜单样式场景，而奕江更适合做工具提示。