css

Hover effect

Veranderen van stijl bij het hover over een element en uitsluiten van andere elementen.

Hoe werkt dat dan?

Veranderen van stijl bij het hover over een element en uitsluiten van andere elementen.

<ul>
  <li>Appel</li>
  <li>Banaan</li>
  <li>Sinaasappel</li>
  <li>Mango</li>
  <li>Ananas</li>
  <li>Aardbei</li>
  <li>Bessen</li>
  <li>Peer</li>
  <li>Pruim</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;
      }
    }
  }