Discussion :

[ahmedpa]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

le css de l'ancienne image est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.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.

[Jacques Beauregard]

Bonjour,

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

Solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[ahmedpa]

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

[ahmedpa]

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

Je vous remercie.