使用 CSS 实现鼠标悬停触发的下拉菜单

本文介绍了如何使用纯 CSS 实现鼠标悬停时展开的下拉菜单，无需依赖任何 JavaScript 框架。通过 :hover 伪类和子选择器，我们可以轻松地控制下拉菜单的显示与隐藏，并提供了三种不同的实现方式，分别通过控制 display、height 和 opacity 属性来实现下拉效果。

使用 CSS 实现悬停下拉菜单

在网页设计中，下拉菜单是一种常见的导航方式，可以有效地组织和呈现大量链接。通常，下拉菜单需要通过 JavaScript 来实现，但使用纯 CSS 也可以实现简单的悬停下拉菜单，无需任何 JavaScript 代码。这不仅可以减少代码量，还可以提高网页的加载速度。

以下将介绍三种不同的纯 CSS 实现悬停下拉菜单的方法。

方法一：控制 display 属性

这种方法通过控制下拉菜单的 display 属性来实现显示和隐藏。默认情况下，下拉菜单的 display 属性设置为 none，当鼠标悬停在父元素上时，将其设置为 block。

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

HTML 代码：

小羊标书

一键生成百页标书，让投标更简单高效

62

查看详情

<ul class="navbar-nav">
  <li class="nav-item dropdown-1">
    <a class="nav-link dropdown-toggle" id="navbarDropdown">Category</a>
    <div class="dropdown-menu-1">
      <a>Login</a>
      <a>Another action</a>
      <a>Something else here</a>
    </div>
  </li>
</ul>

CSS 代码：

.nav-item a {
  display: block;
}

.dropdown-menu-1 {
  display: none;
}

li.dropdown-1:hover > .dropdown-menu-1 {
  display: block;
}

解释：

• .nav-item a：确保链接以块级元素显示，以便占据整个宽度。
• .dropdown-menu-1：默认隐藏下拉菜单。
• li.dropdown-1:hover > .dropdown-menu-1：当鼠标悬停在 li 元素上时，显示下拉菜单。> 符号表示直接子元素选择器，确保只选择当前 li 元素下的 dropdown-menu-1。

方法二：控制 height 属性

这种方法通过控制下拉菜单的 height 属性来实现动画效果。默认情况下，下拉菜单的 height 属性设置为 0 和 overflow: hidden，当鼠标悬停在父元素上时，将其设置为 auto。

HTML 代码：

<ul class="navbar-nav">
  <li class="nav-item dropdown-2">
    <a class="nav-link dropdown-toggle" id="navbarDropdown">Category</a>
    <div class="dropdown-menu-2">
      <a>Login</a>
      <a>Another action</a>
      <a>Something else here</a>
    </div>
  </li>
</ul>

CSS 代码：

.dropdown-menu-2 {
  height: 0;
  overflow: hidden;
}

li.dropdown-2:hover > .dropdown-menu-2 {
  height: auto;
}

解释：

• .dropdown-menu-2：默认隐藏下拉菜单，并将高度设置为 0。overflow: hidden 确保内容超出高度时被隐藏。
• li.dropdown-2:hover > .dropdown-menu-2：当鼠标悬停在 li 元素上时，将高度设置为 auto，使下拉菜单展开。

方法三：控制 opacity 属性

这种方法通过控制下拉菜单的 opacity 属性来实现淡入淡出的效果。默认情况下，下拉菜单的 opacity 属性设置为 0 和 pointer-events: none，当鼠标悬停在父元素上时，将其设置为 1 和 pointer-events: all。

HTML 代码：

<ul class="navbar-nav">
  <li class="nav-item dropdown-3">
    <a class="nav-link dropdown-toggle" id="navbarDropdown">Category</a>
    <div class="dropdown-menu-3">
      <a>Login</a>
      <a>Another action</a>
      <a>Something else here</a>
    </div>
  </li>
</ul>

CSS 代码：

.dropdown-menu-3 {
  opacity: 0;
  pointer-events: none;
}

li.dropdown-3:hover > .dropdown-menu-3 {
  opacity: 1;
  pointer-events: all;
}

解释：

• .dropdown-menu-3：默认隐藏下拉菜单，并将透明度设置为 0。pointer-events: none 确保鼠标事件不会穿透下拉菜单。
• li.dropdown-3:hover > .dropdown-menu-3：当鼠标悬停在 li 元素上时，将透明度设置为 1，使下拉菜单显示，并将 pointer-events 设置为 all，使其可以响应鼠标事件。

总结

以上三种方法都可以实现纯 CSS 的悬停下拉菜单。选择哪种方法取决于具体的需求和设计风格。第一种方法简单直接，但没有动画效果。第二种方法可以实现简单的展开动画，第三种方法可以实现淡入淡出的动画效果。在实际应用中，可以根据需要进行调整和优化，例如添加过渡效果，使其更加平滑自然。

注意事项：

• 确保父元素（li）具有明确的高度或宽度，以便下拉菜单能够正确显示。
• 可以使用 CSS 过渡（transition）属性来添加动画效果，例如 transition: height 0.3s ease-in-out;。
• 对于更复杂的下拉菜单，可能需要使用 JavaScript 来实现更高级的功能。

以上就是使用 CSS 实现鼠标悬停触发的下拉菜单的详细内容，更多请关注php中文网其它相关文章！