vue Hover sur une image
Kommunauty
Connexion
Inscription

Forum Internet Hover sur une image

Hover sur une image


Yopopo Messages : 28

Bonjour, voilà ça fait pas mal de temps que j'essaye de mettre un hover sur image, pour que quand on passe son curseur sur l'image la même image en blanc s'affiche. J'ai essayé plusieurs méthodes sur des forums divers et variés mais je n'y arrive nullement.

Mon code html est : 

<li class="none"><a class="amv_hover" title="AMVs" href="amv.php"></a></li>

Et ma CSS est :


.amv_hover a
{ 
   width: 100px;
   height: 27px;
   background-image:url('styles/design/amv.jpg');
}

.amv_hover a:hover
{ 
   width: 100px;
   height: 27px;
   background-image:url('styles/design/amv_hover.jpg');
}
.

Merci .
dimanche 25 mars 2012

cdmcruises Messages : 3

Salut T'as essayé de le mettre dans un div ?
dimanche 25 mars 2012

SiMax Messages : 7572

Salut,

Tu veux dire quoi par "la même image en blanc" ?
dimanche 25 mars 2012

Mizur Messages : 6615

Je suppose que c'est du genre avec une image unie blanche devant de même dimension et d'opacité d'environ 40%.
lundi 26 mars 2012

SiMax Messages : 7572

OkéOké ! Essaye avec ça alors :


.amv_hover a
{
   display: block;
   width: 100px;
   height: 27px;
   background-image:url('styles/design/amv.jpg');
}

.amv_hover a:hover
{
   display: block;
   width: 100px;
   height: 27px;
   background-image:url('styles/design/amv_hover.jpg');
}
lundi 26 mars 2012

Yopopo Messages : 28

Ca serait que lorsqu'on passe la souris sur cette image : http://very-zatchbell.com/zarno/styles/design/amv.jpg

Elle se change en cette image : http://very-zatchbell.com/zarno/styles/design/amv_hover.jpg

A l'apparence blanche, comme pour les liens qui changent de couleur par hover, je voudrais le faire pour une image.

J'ai essayé ton code SiMax mais c'est pareil, merci de votre attention
lundi 26 mars 2012

SiMax Messages : 7572

Ah j'ai fait ça vite fait et j'avais pas vu la faute. Il faut pas rajouter le a dans le CSS. Sinon ça veut dire "selectionner les liens inclus dans la classe .amv_hover".

.amv_hover
{
   display: block;
   width: 100px;
   height: 27px;
   background-image:url('styles/design/amv.jpg');
}

.amv_hover:hover
{
   background-image:url('styles/design/amv_hover.jpg');
}
lundi 26 mars 2012

Yopopo Messages : 28

Bon, ça marche toujours pas, j'ai crus voir qu'on pouvait faire la même chose en javascript mais je n'arrive pas à adapter le code. Je pense que le problème viens du code html mais je ne trouve pas l'erreur, si vous avez un code qui ferra cet hover en javascript, je suis preneur.
lundi 26 mars 2012

Yopopo Messages : 28

Le code html est du coup :

<li class="none"><span class="amv_hover"><a title="AMVs" href="amv.php"></a></span></li>

Et la css :

.amv_hover
{
   display: block;
   width: 100px;
   height: 27px;
   background-image:url('styles/design/amv.jpg');
}

.amv_hover:hover
{
   background-image:url('styles/design/amv_hover.jpg');
}

Merci
lundi 26 mars 2012

Warranty Messages : 389

J'ai testé ton code est il fonctionne parfaitement, bizarre

EDIT:

Tu est sous quel navigateur ? Je pense que tu est sous IE, car ton code ne fonctionne sous celui-ci.

Pour réglé ton problème il faut que tu change:

 <li class="none"><span class="amv_hover"><a title="AMVs" href="amv.php"></a></span></li>

En:

<li class="none"><a class="amv_hover" title="AMVs" href="amv.php"></a></li>
lundi 26 mars 2012 (Dernière édition lundi 26 mars 2012)

Page suivante »
Pages : 01

Forum Internet Hover sur une image

Kommunauty © Tous droits réservés Contact / Charte & Mentions légales / Hebergement gratuit / Bon plan hébergement / Aide B2i

RSS