Comment puis-je atténuer tous les éléments sauf celui sur lequel je survole en utilisant CSS ?

Réduire l'opacité de tous les éléments sauf celui survolé

En CSS, vous pouvez ajuster l'opacité des éléments pour contrôler leur transparence. Pour obtenir l'effet de réduction de l'opacité de tous les éléments à l'exception de celui survolé, suivez ces étapes :

• Définissez une opacité inférieure pour tous les éléments. Commencez par appliquer une valeur d'opacité inférieure à tous les éléments d'un conteneur cible à l'aide de la propriété opacity. Cela réduira leur visibilité tout en laissant l’élément survolé inchangé. Par exemple :

ul:hover li {
  opacity: 0.5;
}

• Réinitialisez l'opacité de l'élément survolé. Pour faire ressortir l'élément survolé, restaurez son opacité à 1, qui est sa valeur par défaut valeur. Vous pouvez y parvenir en utilisant ce qui suit :

ul li:hover {
  opacity: 1;
}

Remarque : Ces règles s'appliquent aux éléments li dans le conteneur ul qui déclenche l'effet de survol.

Exemple :

Considérez ce qui suit code :

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

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

Lorsque vous survolez l'un des éléments de la liste (

), tous les autres éléments de la liste s'estomperont jusqu'à une opacité de 50 %, tandis que l'élément survolé conserve une visibilité totale.

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!