Comment maintenir l'opacité des éléments survolés tout en réduisant celle des autres en CSS ?

Obtenir une opacité variable sur les éléments à l'exception de ceux survolés

Vous disposez d'une collection d'éléments, tels que

balises, et vous souhaitez réduire l’opacité de chacune d’elles lorsque l’élément parent est survolé. Cependant, vous souhaitez que l'opacité reste inchangée pour l'élément qui est directement survolé.

Cela peut être accompli en utilisant CSS. En appliquant des styles de survol à l'élément parent et en les rétablissant pour l'élément survolé, vous pouvez obtenir l'effet souhaité :

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

Cette technique fonctionne comme suit :

• Lorsque l'élément parent
  l'élément est survolé, tous les éléments
  • les éléments qu'il contient verront leur opacité réduite à 0,5.
  • Lorsque vous survolez un
  • élément, le style de survol de l'élément
    est appliqué, réduisant l'opacité à 0,5. Cependant, le style de survol du
    • réinitialise l'opacité à 1.

    Il en résulte l'effet souhaité, où tous

  • Les éléments à l'exception de celui survolé voient leur opacité réduite, tandis que l'élément survolé reste inchangé.

    Exemple

    Voici un exemple HTML et CSS simple pour démontrer cette technique :

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

    Remarque : Cette technique peut être utilisée pour réaliser divers effets d'opacité sur différents éléments en fonction des interactions de survol ou d'autres événements.

    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!