style Fleche interactive grace à :hover + :active [HTML5-CSS3] Résolu

Question

Bonjour, Je possède 6 image en PNG. Ce sont 6 flèche 3 pour la gauche et 3 pour la doite : FOR.png, FORhover.png, FORactive.png et FOL.png, FOLhover, FOLactive. FOR et FOL sont les flèches de base puis les Xactive et Xhover sont les même images mais de couleur différentes. J'ai placer en html5 les images FOR et FOL sur ma page, et j'aimerais grâce à la balise :hover et :active afficher les images Xactive et Xhover par dessus les autres pour faire comme si les flèche de base changer de couleur. Voici le code que j'ai tester : ***************************************************************** HTML5 : Left

***************************************************************** CSS3 : .FOR:hover {background-image: url(image/FORhover.png);} .FOR:active {background-image: url(image/FORactive.png);} .FOL:hover {background-image: url(image/FOLhover.png);} .FOL:active {background-image: url(image/FOLactive.png);} ***************************************************************** Cependant ce code ne fonctionne pas... Avez vous une idée ou une autre manière de faire ? Configuration: Linux / Firefox 21.0

Pitet · Answer

Salut, La propriété css background-image n'est pas liée à l'attribut src de ta balise img, tu ne peux donc pas modifier ton image comme ceci. Pour faire simple, utilise plutôt des balise div à la place de tes balises img : HTML :

Bon développement

CSS3_3RoR · Answer

RE : je vien de tester ce code : HTML: Ce code ne fonctionne toujours pas... Est a cause du fait que j'ai utiliser des span a la place des div ?

CSS3_3RoR · Answer

J'ai trouver la solution !

Mon erreur été de mélanger déclaration de style en HTML et CSS.

Pour utiliser les :hover :active il faut que le style de l'element de base soit configurer en CSS. Or je le configurais en HTML:

*********************************************************************
HTML:

<span class="FOL"></span>

<span class="FOR"></span>
**********************************************************************
CSS:

.FOR
{
position:absolute;

background-image:url('image/flecheOverviewRight.png');

top:230px;

left:1165px;

width:25px;

height:37px;
}

.FOL
{
position:absolute;

background-image:url('image/flecheOverviewLeft.png');

top:230px;

left:860px;

width:25px;

height:37px;
}

**************************************************************************

Merci pour votre aide !

Style Fleche interactive grace à :hover + :active [HTML5-CSS3]

3 réponses

Votre réponse

Discussions similaires