本文介绍了如何使用纯CSS实现下拉菜单在鼠标悬停时保持显示，以及鼠标移开后隐藏的交互效果。通过利用CSS的:hover伪类，可以避免使用JavaScript，简化代码并提高性能。同时，也讨论了这种方法在键盘可访问性方面的局限性，并提供了相应的注意事项。
使用CSS :hover 伪类实现下拉菜单
实现下拉菜单的一种常见需求是，当鼠标悬停在菜单项上时，下拉菜单显示；当鼠标移开时，下拉菜单隐藏。 使用 JavaScript 可以实现此功能，但使用纯 CSS 可以简化代码并提高性能。
关键在于使用 CSS 的 :hover 伪类。:hover 伪类允许您在鼠标悬停在元素上时应用样式。
以下是如何使用 CSS 实现此效果的步骤：
立即学习“前端免费学习笔记（深入）”；
HTML 结构：
HTML 结构需要包含主菜单项和下拉菜单。 下拉菜单应该嵌套在主菜单项中。
CSS 样式：
首先，将下拉菜单的 visibility 属性设置为 hidden，使其默认隐藏。然后，使用 :hover 伪类来改变当鼠标悬停在主菜单项上时，下拉菜单的 visibility 属性为 visible。
.sub-men { display: flex; flex-direction: column; position: absolute; list-style: none; visibility: hidden;}/* makes sub-men visible when its parent is hoverd. */.main-menu li:hover .sub-men { visibility: visible;}
完整的 CSS 代码如下：
* { box-sizing: border-box; margin: 0; padding: 0;}nav { display: flex; flex-direction: row; justify-content: space-between; height: 10vh; background-color: aquamarine;}.logo { display: flex; align-items: center; margin-left: 10px;}.main-menu { display: flex; list-style: none; align-items: center;}.main-menu>li { position: relative; height: 10vh;}.main-menu>li>a { display: flex; padding: 0 1rem; text-decoration: none; background-color: antiquewhite; height: 10vh; align-items: center;}.sub-men { display: flex; flex-direction: column; position: absolute; list-style: none; visibility: hidden;}/* makes sub-men visible when its parent is hoverd. */.main-menu li:hover .sub-men { visibility: visible;}.sub-men>li { position: relative; background-color: aquamarine; padding: .5rem 1rem; width: 100px; text-align: center;}.visible { visibility: visible;}.sub-men>li:hover { background-color: aqua;}.sub-men>li>a { text-decoration: none; position: relative;}
移除 JavaScript 代码：
如果之前使用了 JavaScript 代码来控制下拉菜单的显示和隐藏，现在可以移除它。
// 移除以下代码document.querySelector('#drop').addEventListener('click', (e) => { document.querySelector('.sub-men').classList.toggle('visible');})
完整代码示例
HTML 5 Boilerplate
注意事项
键盘可访问性： 这种纯 CSS 的方法在键盘可访问性方面存在局限性。 因为 :hover 伪类只在鼠标悬停时触发，所以使用键盘导航的用户无法访问下拉菜单。 如果需要支持键盘导航，则需要使用 JavaScript 来实现。复杂的交互： 对于更复杂的交互，例如点击菜单项后保持下拉菜单显示，或者需要在菜单外部点击才能关闭菜单，使用 JavaScript 可能更合适。
总结
使用 CSS 的 :hover 伪类可以方便地实现鼠标悬停时显示下拉菜单的效果。 这种方法简单高效，但需要注意键盘可访问性的问题。 在选择实现方式时，需要根据具体的需求和场景进行权衡。
以上就是使用CSS实现鼠标悬停时保持显示的下拉菜单的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1574962.html
微信扫一扫 
支付宝扫一扫 
