How to Highlight Active Menu Items While Dimming Inactive Ones with CSS?

How to Highlight Active Menu Items and Dim Non-Active Ones

In this code snippet, we encounter a scenario where we want to dim the opacity of all menu items (

elements) when the parent menu (

) is hovered. However, the hovered menu item itself should remain at full opacity.

CSS Solution

To achieve this effect, we utilize CSS to dynamically adjust the opacity of the menu items:

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

Explanation:

• The first rule (ul:hover li) applies an opacity of 0.5 to all
• elements when their parent
  is hovered. This dims the menu items that are not currently being hovered over.
  • The second rule (ul li:hover) resets the opacity to 1 for the
  • element that is actually being hovered over. This ensures that the current menu item remains at full visibility.

  Example

  Consider the following HTML and CSS code:

  <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>

  When you hover over the

  element, all
  • elements except the one you're hovering over will become 50% transparent, while the hovered
  • element will remain at full opacity. This creates a subtle highlight effect, guiding users to the active menu item.

    The above is the detailed content of How to Highlight Active Menu Items While Dimming Inactive Ones with CSS?. For more information, please follow other related articles on the PHP Chinese website!