当前位置: 首页 > 面试题库 >

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

李兴庆
2023-03-14
问题内容

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


问题答案:

您可以执行以下操作:

div {

    display: none;

}



a:hover + div {

    display: block;

}


<a>Hover over me!</a>

<div>Stuff shown on hover</div>

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

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



 类似资料:
  • 我有这个样本: 链接 CODE超文本标记语言: 所有人都能清楚地理解错误所在,并能清楚地了解所有人的行为,包括发明者的行为,并能清楚地了解自己的真实性和准建筑风格。 代码CSS: 代码JS: 我希望div

  • 问题内容: 有时,我可以选择使用CSS元素:悬停或JavaScript onmouseover来控制页面上html元素的外观。考虑以下情况,其中div包装了输入 我希望输入将鼠标光标悬停在div上时更改背景色。CSS方法是 JavaScript方法是 每种方法的优点和缺点是什么?CSS方法是否适用于大多数Web浏览器?JavaScript比CSS慢吗? 问题答案: :hover的问题是IE6仅在链

  • 问题内容: 我试图当鼠标移到图像的左下方时出现一个小框。在该框内,将有一个指向其他页面的链接。 这有点类似于我想要的东西,但是盒子要更小并且不连接到图像的边框。 我已经尝试了一切,但找不到答案。而且我不想使用工具提示,更不用说我没有任何JavaScript知识了。我真的希望这是CSS。 问题答案: 这是在CSS3中使用伪元素。 HTML: CSS: 相反,这是使用jquery达到相同结果的一种方式

  • 我有一个应用程序,我想在

  • 问题内容: 全屏是提供全屏框架的另一类。JButton上面有ImageIcon。bg1.png是背景图像 问题 是这些JButton仅在鼠标悬停时才可见,否则它们不出现。 问题答案: 您可能会遇到布局问题,在该问题中,您尝试将具有绝对界限的JButton添加到使用非null布局管理器的容器中。意见建议 不要使用setBounds和绝对定位来调整和放置组件。 阅读并使用布局管理器为您完成繁重的工作:

  • 问题内容: 如何显示一组隐藏的div的onmouseover? 例如 : 所有div需要在onmouseover事件中显示。 问题答案: 如果div被隐藏,它们将永远不会触发该事件。 您将不得不听其他未隐藏元素的事件。 您可以考虑将隐藏的div包装到保持可见的容器div中,然后对这些容器进行操作。 如果希望当鼠标离开容器div时div消失,也可以监听事件: