How Can I Make List Items Semi-Transparent Except for the One Hovered Over?

Achieving Partial Opacity on Elements Excluding the Hovered One

The objective of this inquiry is to explore the possibility of selectively lowering the opacity of elements, specifically list items (li), while exempting the currently hovered item. This effect emulates a visual cue that highlights the hovered element.

Employing CSS Solution

To accomplish this behavior, we utilize Cascading Style Sheets (CSS) rules:

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

Explanation

• The first rule sets the opacity of all list items within a hovered parent list (ul) element to 0.5, making them semi-transparent.
• The second rule overrides the previous rule for the hovered list item, restoring its opacity to 1, effectively making it opaque.

Implementation

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

This demonstration illustrates the desired effect, where all list items except the currently hovered one appear semi-transparent when the parent list element is hovered. The hovered item remains fully opaque, accentuating its presence.

The above is the detailed content of How Can I Make List Items Semi-Transparent Except for the One Hovered Over?. For more information, please follow other related articles on the PHP Chinese website!