css

Hover effect

Change styles on the hovered item while dimming the other items.

How does that work?

When you hover one item, its style updates while the other items are visually de-emphasized.

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Pineapple</li>
  <li>Strawberry</li>
  <li>Berries</li>
  <li>Pear</li>
  <li>Plum</li>
</ul>

ul {
      display: flex;
      flex-direction: column;
      gap: .3rem;
    @media (hover) and (prefers-reduced-motion: no-preference) {
      & > li {
        cursor: pointer;
        transition: opacity .3s var(--ease-3);
      }
      
      &:hover > li:not(:hover) {
        opacity: .25;
      }
    }
  }