Comment puis-je rendre les éléments de la liste semi-transparents, à l'exception de celui survolé ?

Atteindre une opacité partielle sur les éléments à l'exclusion de celui survolé

L'objectif de cette enquête est d'explorer la possibilité de réduire sélectivement l'opacité des éléments , répertoriez spécifiquement les éléments (li), tout en exemptant l'élément actuellement survolé. Cet effet émule un signal visuel qui met en évidence l'élément survolé.

Utilisation d'une solution CSS

Pour accomplir ce comportement, nous utilisons des feuilles de style en cascade (CSS). règles :

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

Explication

• La première règle définit l'opacité de tous les éléments de liste dans un élément de liste parent (ul) survolé à 0,5, ce qui rend les semi-transparents.
• La deuxième règle remplace la règle précédente pour l'élément de liste survolé, rétablissant son opacité à 1, le rendant effectivement opaque.

Mise en œuvre

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

Cette démonstration illustre l'effet souhaité, où tous les éléments de la liste, à l'exception de celui actuellement survolé l'un apparaît semi-transparent lorsque l'élément de la liste parent est survolé. L'élément survolé reste totalement opaque, accentuant sa présence.

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!