How Can I Dim All Elements Except the One I Hover Over Using CSS?

Reducing Opacity for All Elements Except the Hovered One

In CSS, you can adjust the opacity of elements to control their transparency. To achieve the effect of reducing the opacity of all elements except the hovered one, follow these steps:

• Set a lower opacity for all elements. Start by applying a lower opacity value to all of the elements within a target container using the opacity property. This will reduce their visibility while leaving the hovered element unaffected. For example:

ul:hover li {
  opacity: 0.5;
}

• Reset the opacity for the hovered element. To make the hovered element stand out, restore its opacity to 1, which is its default value. You can achieve this using the following:

ul li:hover {
  opacity: 1;
}

Note: These rules apply to the li elements within the ul container that triggers the hover effect.

Example:

Consider the following code:

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

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

When hovering over any of the list items (

), all other list items will fade to 50% opacity, while the hovered item retains full visibility.

The above is the detailed content of How Can I Dim All Elements Except the One I Hover Over Using CSS?. For more information, please follow other related articles on the PHP Chinese website!