image avec hover? (Souris au-dessus)

Question

pour changer de

lorsque la souris sur .. comme vous pouvez le faire avec: hover, comment puis-je faire cela?

J'ai essayé

addFriend img:hover{ 
    background: url(images/addFriend_hover.png); 
} 

Answer 1

Ditch la balise img, et de le faire sans javascript

(du haut de ma tête, non testé)

HTML

<div class="addFriend"><a href="addfriend.html">Add Friend</a></div> 

CSS

.addFriend { background: url(images/addFriend.png); } 
.addFriend:hover { background: url(images/addFriend_hover.png); } 

Answer 2

Vous devez utiliser un conteneur avec une image de fond, par exemple un div avec une hauteur et une largeur spécifiées. Ensuite, vous pouvez utiliser l'image d'arrière-plan et un: hover-pseudo-classe.

Answer 3

Vous pourriez utilise également jQuery.

$('img.addFriend').hover(function() { 
$(this).attr('src','images/addFriend_hover.png'); 
}, function() { 
$(this).attr('src','images/addFriend.png'); 
}); 

Modifier Vous pouvez également faire non jQuery, je suppose que vous ne voulez pas un background-image ou un href

<img src='images/addFriend.png' onmouseover='this.src="images/addFriend_hover.png"' onmouseout='this.src="images/addFriend.png"' />

Answer 4

Pour que cela fonctionne dans tous les navigateurs avec le moins de code que vous pouvez le faire avec CSS.

<a href="#" class="icon">Add A Friend</a> 



.icon { 
    display: block; 
    width: (width of image); 
    height: (height of image); 
    text-indent: -9999px; /* hides the text 'Add A Friend' */ 
    background: url(url of image) no-repeat center center; 
    padding-right: 55px; 
} 

.icon:hover { 
    background: url(url of new image) no-repeat center center; 
} 

Answer 5

Ce tutoriel peut être utile: http://www.w3schools.com/js/js_animation.asp pour voir si elle fait ce que vous voulez, faites défiler vers le bas pour « Tout le code » et cliquez sur « Essayez vous-même ».