当有人将鼠标悬停在<a>元素上时,我想显示一个div,但我想用CSS而不是JavaScript来做这件事.你知道怎样才能做到这一点吗?

推荐答案

你可以做类似this:

div {
    display: none;
}
    
a:hover + div {
    display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>

它使用adjacent sibling selector,是suckerfish dropdown menu的基础.

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

Css相关问答推荐

我怎样才能在某些区域制作一个单独的文本行,而在其他区域制作一个实心填充?

react native 文本离开我的屏幕,拒绝换行.该怎么办?

如何更改 Angular Material 上 mat-icon 的大小?

使用 JavaScript 将 CSS 添加到?

在 React Native 中使视图宽度为父级的 80%

从 css 到 scss 的 Angular-cli

当固定元素获得焦点时,ios8 中的 Safari 正在滚动屏幕

flex-wrap 如何与 align-self、align-items 和 align-content 一起使用?

如何在点击时隐藏可折叠的 Bootstrap 导航栏

如何参加滚动事件?

'position: absolute' 是否与 Flexbox 冲突?

如何实现最大字体大小?

CSS `url()` 中的 `~` 波浪号有什么作用?

如何从父组件的 CSS 文件中设置子组件的样式?

如何保持包装的弹性项目与前一行元素的宽度相同?

弹性容器中的文本不会在 IE11 中换行

Chrome 开发工具显示计算(computed)属性灰显是什么意思

如何在 Flexbox 中禁用等高列?

使用css水平+垂直翻转/镜像图像

从 bootstrap 程序 3 中的选择标签中删除边框半径