How to Make Non-Hovered List Items Semi-Transparent Using CSS?

Manipulating Opacity on Non-Hovered Elements

In your HTML markup, you can dynamically adjust the opacity of all list items (LIs) except the one currently being hovered. This technique creates an effect where unhovered elements become subtly transparent while the hovered item remains fully visible.

To achieve this, CSS can be leveraged:

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

In this code snippet:

• The first line reduces the opacity of all LIs (except the hovered item) to 50%, making them appear semi-transparent.
• The second line ensures that the hovered LI retains an opacity of 1, keeping it opaque.

HTML Example:

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

CSS Styles:

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

li {
  width: 100px;
  height: 100px;
  background-color: gray;
  margin-right: 10px;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

Result:

When you hover over an LI, its opacity will remain at 1, while all other LIs will become semi-transparent. This provides a visual cue for the currently active element.

The above is the detailed content of How to Make Non-Hovered List Items Semi-Transparent Using CSS?. For more information, please follow other related articles on the PHP Chinese website!