如何使用 CSS 突出显示活动菜单项同时调暗非活动菜单项？

如何突出显示活动菜单项并调暗非活动菜单项

在此代码片段中，我们遇到了一个想要调暗菜单项的场景当父菜单 (

) 悬停时所有菜单项 (
• 元素) 的不透明度。但是，悬停的菜单项本身应保持完全不透明。

  CSS 解决方案

  为了实现此效果，我们利用 CSS 动态调整菜单的不透明度items:

  ul:hover li {
    opacity: 0.5;
  }
  ul li:hover {
    opacity: 1;
  }

  登录后复制

  解释：

  • 第一条规则 (ul:hover li) 对所有
  • 应用 0.5 的不透明度。当其父级
    时的元素悬停。这会使当前未悬停的菜单项变暗。
  • 第二条规则 (ul li:hover) 将
  • 的不透明度重置为 1。实际悬停在其上的元素。这可确保当前菜单项保持完全可见。

  示例

  考虑以下 HTML 和 CSS 代码：

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  
  <style>
    li {
      float: left;
      width: 33.33%;
      line-height: 50px;
      background: gray;
      list-style-type: none;
    }
    ul:hover li {
      opacity: 0.5;
    }
    ul li:hover {
      opacity: 1;
    }
  </style>

  登录后复制

  当您将鼠标悬停在

  上时元素，所有
  • 除您悬停的元素之外的元素将变为 50% 透明，而悬停的
  • 将变为 50% 透明。元素将保持完全不透明。这会创建微妙的突出显示效果，引导用户到达活动菜单项。

以上是如何使用 CSS 突出显示活动菜单项同时调暗非活动菜单项？的详细内容。更多信息请关注PHP中文网其他相关文章！