How to Maintain Hovered Element Opacity While Reducing Others' in CSS?

Achieving Variable Opacity on Elements Except Hovered Ones

You have a collection of elements, such as

tags, and you want to lower the opacity of all of them when the parent element is hovered. However, you want the opacity to remain unchanged for the element that is directly hovered.

This can be accomplished using CSS. By applying hover styles to the parent element and reverting them for the hovered element, you can achieve the desired effect:

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

This technique works as follows:

• When the parent
  element is hovered, all
  • elements within it will have their opacity reduced to 0.5.
  • When you hover over a specific
  • element, the hover style for the
    is applied, reducing the opacity to 0.5. However, the hover style for the hovered
    • resets the opacity back to 1.

    This results in the desired effect, where all

  • elements except the one being hovered have their opacity reduced, while the hovered element remains unaffected.

    Example

    Here's a simple HTML and CSS example to demonstrate this technique:

    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

    li {
      float: left;
      width: 33.33%;
      line-height: 50px;
      background: grey;
      list-style-type: none;
    }
    ul:hover li {
      opacity: 0.5;
    }
    ul li:hover {
      opacity: 1;
    }

    Note: This technique can be used to achieve various opacity effects on different elements based on hover interactions or other events.

    The above is the detailed content of How to Maintain Hovered Element Opacity While Reducing Others' in CSS?. For more information, please follow other related articles on the PHP Chinese website!