仅使用CSS，将鼠标悬停时显示div

一尘不染

css

当有人将鼠标悬停在<a>元素上时，我想显示一个div ，但是我想在CSS中而不是在JavaScript中执行此操作。您知道如何实现吗？

阅读 2626

2020-05-16

共1个答案

一尘不染

您可以执行以下操作：

div {

    display: none;

}



a:hover + div {

    display: block;

}


<a>Hover over me!</a>

<div>Stuff shown on hover</div>

这使用相邻的兄弟选择器，是the下拉菜的基础。

HTML5允许锚元素包装几乎所有内容，因此在这种情况下，该div元素可以成为锚的子元素。否则原理是相同的-使用:hover伪类更改display另一个元素的属性。

2020-05-16