Changer image avec l'action hover

Bonjour,

J'ai une balise dans ma page html et lorsque je fais inspecter l’élément sur cette balise je vois le code suivant:

Code:

---

1 2 3 4 5

<li id="menu-item-1394" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1394" style="left: 230px; top: 120px;">   ::before   <a href="" class="no-animation">Nos métiers</a></li>

---

Dans cette balise existe une image et a coté de l'image il y a le texte Nos métier.

Ce que je voudrais faire : quant je place mon curseur sur l'image je voudrai bien que uniquement l'image change.

J'ai mi le code suivant dans mon css mais il me remplace l'ancienne image avec l'écriture par la nouvelle image et moi je voudrai bien que l'écriture reste.

Code:

---

.circular-menu li:hover {content: url('monimage.jpg'); padding-right:10px; vertical-align: -45%;}

---

le css de l'ancienne image est le suivant :

Code:

---

.circular-menu li::before {content: url('img/puce-grey.jpg'); padding-right:10px; vertical-align: -45%;}

---

Est-ce-que vous pouvez m'aider s'il vous plait ?

Merci.

Bonjour,

Ton hover attaque la balise <li> en entier.. Donc tu remplaces l'images ainsi que le texte.

Solution :

Code:

---

1 2	.circular-menu li:hover::before {content: url('monimage.jpg'); padding-right:10px; vertical-align: -45%;}

---

Merci pour votre réponse, j'ai essayé votre solution il m'affiche bien la nouvelle image avec l'ancienne.

Comment je pourrai cacher l'ancienne s'il vous plait?

Merci

Je me suis trompé.. ça marche avec votre solution.

Je vous remercie.