Comment changer la source de la balise <img> au survol ?

Question

Je dois changer <img> URL source sur hover .

J'ai essayé mais ça ne marche pas :

HTML

<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

CSS

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

jsFiddle

Toute aide serait appréciée.

Mise à jour :

Cela ne fonctionne que pour Webkit / Google Chrome.

Answer 1

Vous ne pouvez pas changer le src de l'image en utilisant le css. Vous pouvez cependant utiliser la solution purement css suivante. HTML :

<div id="asks"></div>

CSS :

#asks {
  width: 100px;
  height: 100px;
  background-image: url('http://dummyimage.com/100x100/0000/fff');
}

#asks:hover {
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Ou, si vous ne voulez pas utiliser un div avec une image de fond, vous pouvez utiliser une solution javascript/jQuery. Html :

<img id="asks" src="http://dummyimage.com/100x100/000/fff" />

jQuery :

$('#asks')
  .mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');})
  .mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});

Answer 2

Personnellement, j'opterais pour l'une des solutions JavaScript / jQuery. Non seulement cela permet de conserver la sémantique de votre HTML (par exemple, une image est affichée en tant qu'élément img avec son image src habituelle définie dans le balisage), mais si vous utilisez une solution JS / jQuery, vous pourrez également utiliser JS / jQuery pour précharge votre image de survol.

Le préchargement de l'image survolée signifie qu'il n'y aura probablement pas de délai de téléchargement lorsque l'utilisateur survole l'image originale, ce qui permet à votre site de se comporter de manière beaucoup plus professionnelle.

Cela signifie que vous avez une dépendance à JS, mais l'infime minorité qui n'a pas activé JS ne va probablement pas trop s'inquiéter - et tous les autres bénéficieront d'une meilleure expérience... et votre code sera bon, aussi !

Answer 3

Vous ne pouvez pas changer img de l'étiquette src en utilisant l'attribut CSS . Possibilité d'utiliser Javascript onmouseover() gestionnaire d'événements.

HTML :

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover='hover()'/>

Javascript :

function hover() {
  document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff";
}

Answer 4

Pour cela, vous pouvez utiliser le code suivant

1) html

<div id = "aks">

</div>

2) css

#aks
    {
        width:100px;
height:100px;    

        background-image:url('http://dummyimage.com/100x100/000/fff');}

#aks:hover {
    background-image:url('http://dummyimage.com/100x100/eb00eb/fff');

}

Answer 5

Sur les anciens navigateurs, :hover ne fonctionnait que sur <a> éléments. Donc tu dois faire quelque chose comme ceci pour le faire fonctionner.

<style>
a#aks
{
    width:100px;
    height:100px;
    display:block;
}

a#aks:link
{
  background-image: url('http://dummyimage.com/100x100/000/fff');
}

a#aks:hover
{
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</style>

<a href="#" id="aks"></a>