仅使用 CSS，在悬停在另一个元素上时显示 div [英] Using only CSS, show div on hover over another element

问题描述

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

I would like to show a div when someone hovers over an <a> element, but I would like to do this in CSS and not JavaScript. Do you know how this can be achieved?

推荐答案

你可以像这个:

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

这使用了相邻兄弟选择器，并且是suckerfish 下拉菜单.

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

HTML5 allows anchor elements to wrap almost anything, so in that case the div element can be made a child of the anchor. Otherwise the principle is the same - use the :hover pseudo-class to change the display property of another element.

这篇关于仅使用 CSS，在悬停在另一个元素上时显示 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！