Menu avec déplacement d'icone font awesome

Bonsoir, ont m'a demander de modifier un effet sur un site à savoir déplacer une Font Awesome triangle au survol du menu avec : Hover, pour le moment le code est réglé avec des buttonradio et cheked, le triangle ce déplace bien au clic, mais il faudrait le même résultat avec un simple Hover et là je sèche totalement.

cahier des charges:

Le triangle est actif par défaut sur le 1er élement All Works

Le triangle ce déplace avec un effet :Hover sur chaque éléments du menu et centré

Utilisé uniquement l'HTML 5 et le CSS pas de javascript et aucun Framework.

Le lien codePen : https://codepen.io/weDev_Formation/pen/LYYdbKV

Merci pour votre aides.

Bonjour,

Citation:

---

le code est réglé avec des buttonradio et cheked, le triangle ce déplace bien au clic, mais il faudrait le même résultat avec un simple Hover et là je sèche totalement.

---

il te faut prendre du recul, boire un verre d'eau ... et traduire ce que tu viens d'écrire en sélecteur CSS

Code:

---

1 2	.radioButton input:checked ~ .caretProjet /* actuellement */ .radioButton:hover .caretProjet /* à venir ou en plus */

---