Bonjour à vous !

J'ai réalisé ce site avec wordpress et elementor : https://www.hcube-conseil.fr/

Comme vous pouvez le voir, il y a un menu a gauche. quand il est ouvert, et que vous passez votre souris sur une des rubriques, elle se souligne en :hover.

Cependant, l’icône qui est à sa gauche, n'a pas d'effet hover... Que sur elle même.

Ce que j'aimerai : Quand on passe sur un titre, j'aimerai que l’icône change de couleur. et inversement : quand on va sur l’icône, j'aimerai que le titre se souligne...

J’espère avoir été clair...

Voici le code css que j'ai placé sur le petit groupe icône/titre

selector {
    margin-top: 20px;
}
.elementor-icon-box-icon{
    margin-left: 10px;
}
#menu-accueil .elementor-icon-box-title {
  position: relative;
}
#menu-accueil .elementor-icon-box-title:after {
  display: block;
  position: absolute;
  left: 0;
  bottom: -0px;
  width: 0;
  height: 3px;
  background-color: #1579B6;
  content: "";
  transition: width 0.2s;
}
#menu-accueil .elementor-icon-box-title:hover:after {
  width: 100%;
  color:red;
}
#menu-accueil{
    margin-left: -2px;
}

C'est surtout pour le soulignement

Merci !

Bonjour,

pour le premier, il faut passer par du javascript, car en css, il n y a pas de possibilité d'agir sur un élément précédent, seulement sur un élément suivant ou descendant.

Pour le deuxième, il faut faire

#menu-accueil:hover .elementor-icon-box-title {
  /* Tes règles ici. */
}