使用CSS实现鼠标悬停时保持显示的下拉菜单

本文介绍了如何使用纯CSS实现下拉菜单在鼠标悬停时保持显示，以及鼠标移开后隐藏的交互效果。通过利用CSS的:hover伪类，可以避免使用JavaScript，简化代码并提高性能。同时，也讨论了这种方法在键盘可访问性方面的局限性，并提供了相应的注意事项。

使用CSS :hover 伪类实现下拉菜单

实现下拉菜单的一种常见需求是，当鼠标悬停在菜单项上时，下拉菜单显示；当鼠标移开时，下拉菜单隐藏。 使用 JavaScript 可以实现此功能，但使用纯 CSS 可以简化代码并提高性能。

关键在于使用 CSS 的 :hover 伪类。:hover 伪类允许您在鼠标悬停在元素上时应用样式。

以下是如何使用 CSS 实现此效果的步骤：

立即学习“前端免费学习笔记（深入）”；

1. HTML 结构：

   HTML 结构需要包含主菜单项和下拉菜单。 下拉菜单应该嵌套在主菜单项中。

   

   Magic Eraser

   AI移除图片中不想要的物体

   下载

2. 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;
   }

3. 移除 JavaScript 代码：

   如果之前使用了 JavaScript 代码来控制下拉菜单的显示和隐藏，现在可以移除它。

   // 移除以下代码
   document.querySelector('#drop').addEventListener('click', (e) => {
       document.querySelector('.sub-men').classList.toggle('visible');
   })

完整代码示例

注意事项

• 键盘可访问性： 这种纯 CSS 的方法在键盘可访问性方面存在局限性。 因为 :hover 伪类只在鼠标悬停时触发，所以使用键盘导航的用户无法访问下拉菜单。 如果需要支持键盘导航，则需要使用 JavaScript 来实现。
• 复杂的交互： 对于更复杂的交互，例如点击菜单项后保持下拉菜单显示，或者需要在菜单外部点击才能关闭菜单，使用 JavaScript 可能更合适。

总结

使用 CSS 的 :hover 伪类可以方便地实现鼠标悬停时显示下拉菜单的效果。 这种方法简单高效，但需要注意键盘可访问性的问题。 在选择实现方式时，需要根据具体的需求和场景进行权衡。