Comment mettre en surbrillance les éléments de menu actifs tout en atténuant les éléments inactifs avec CSS ?

Comment mettre en surbrillance les éléments de menu actifs et atténuer ceux qui ne sont pas actifs

Dans cet extrait de code, nous rencontrons un scénario dans lequel nous souhaitons atténuer l'opacité de tous les éléments de menu (éléments

) lorsque le menu parent (

) est survolé. Cependant, l'élément de menu survolé lui-même doit rester avec une opacité totale.

Solution CSS

Pour obtenir cet effet, nous utilisons CSS pour ajuster dynamiquement l'opacité du menu items :

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

Explication :

• La première règle (ul:hover li) applique une opacité de 0,5 à tous les
• éléments lorsque leur parent
  est survolé. Cela atténue les éléments de menu qui ne sont pas actuellement survolés.
  • La deuxième règle (ul li:hover) réinitialise l'opacité à 1 pour le
  • élément sur lequel on survole réellement. Cela garantit que l'élément de menu actuel reste pleinement visible.

  Exemple

  Considérez le code HTML et CSS suivant :

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  
  <style>
    li {
      float: left;
      width: 33.33%;
      line-height: 50px;
      background: gray;
      list-style-type: none;
    }
    ul:hover li {
      opacity: 0.5;
    }
    ul li:hover {
      opacity: 1;
    }
  </style>

  Lorsque vous survolez l'icône

  élément, tous
  • les éléments, à l'exception de celui sur lequel vous survolez, deviendront transparents à 50 %, tandis que les éléments
  • l’élément restera à pleine opacité. Cela crée un effet de surbrillance subtil, guidant les utilisateurs vers l'élément de menu 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!