Bonjour, je débute dans le code et je réalise un exercice pour faire un menu burger. Je souhaite qu'au passage de la souris sur n'importe quel endroit du burger, les trois lignes soient de la même couleur, sauf qu'avec ce code ça ne fonctionne pas vraiment, et une seule ligne change de couleur.

Merci de votre aide

<a href="#" div="openBtn">
        <span class="burger-icon">
          <span id="span_1"></span>
          <span id="span_2"></span>
          <span id="span_3"></span>
        </span>
      </a>


.burger-icon span {
  display: flex;
  height: 5px;
  background-color: rgb(179, 28, 28);
  margin: 4px 0;
  border-radius: 3px;
  }

a :hover {
  background-color: gold;
}

#span_1 {
  width: 20px;
}

#span_2 {
  width: 25px;
}

#span_3 {
  width: 30px;
}

Modifié par Drada (28 May 2022 - 19:37)
Modérateur
Essai de cibler l'élément à survoler puis les enfants auxquels appliqué la regle.


a .burger-icon:hover span {
  background-color: gold;
}


Cdt
Meilleure solution