Comment rendre les éléments de liste non survolés semi-transparents à l'aide de CSS ?

Manipulation de l'opacité sur les éléments non survolés

Dans votre balisage HTML, vous pouvez ajuster dynamiquement l'opacité de tous les éléments de liste (LI) à l'exception celui qui est actuellement survolé. Cette technique crée un effet dans lequel les éléments non survolés deviennent subtilement transparents tandis que l'élément survolé reste entièrement visible.

Pour y parvenir, CSS peut être exploité :

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

Dans cet extrait de code :

• La première ligne réduit l'opacité de tous les LI (sauf l'élément survolé) à 50 %, les faisant apparaître semi-transparent.
• La deuxième ligne garantit que le LI survolé conserve une opacité de 1, le gardant opaque.

Exemple HTML :

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

Résultat :

Lorsque vous survolez un LI, son opacité restera à 1, tandis que tous les autres LI deviendront semi- transparent. Cela fournit un repère visuel pour l'élément actuellement actif.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!