Cacher/afficher une image en utilisant jquery sur hover

Question

J'ai 3 étiquettes <a> dans mon code HTML et elles contiennent chacune 2 images. Seules les images en échelle sont affichées et les autres en sont dépourvues.

Je souhaite masquer l'image en niveaux de gris lorsque je passe la souris sur l'image en mode Grescale et que je l'affiche en couleur. Et quand je débranche, je veux que l'image colorée soit à nouveau cachée. Comment puis-je faire cela en utilisant jquery? Pourquoi utiliser jQuery et pas du CSS pur?

<a class="mylink" href=""> 
    <img src="img/thumbnails/colored-1.jpg" class="color-image"/> 
    <img src="img/thumbnails/greyscale-1.jpg" class="greyscale-image"/> 
</a> 

<a class="mylink" href=""> 
    <img src="img/thumbnails/colored-2.jpg" class="color-image"/> 
    <img src="img/thumbnails/greyscale-2.jpg" class="greyscale-image"/> 
</a> 

<a class="mylink" href=""> 
    <img src="img/thumbnails/colored-3.jpg" class="color-image"/> 
    <img src="img/thumbnails/greyscale-3.jpg" class="greyscale-image"/> 
</a> 

.color-image 
{ 
    display:none 
} 

Answer 1

Vous pouvez utiliser: survolez et basculez l'affichage des images.

a.mylink:hover .color-image, 
a.mylink .greyscale-image { 
    display: inline; 
} 

a.mylink .color-image, 
a.mylink:hover .greyscale-image { 
    display: none; 
} 

En jQuery, il est juste

function swap(evt) { 
    var isOver = evt.type === "mouseenter"; 
    link.find(".color-image").toggle(isOver); 
    link.find(".greyscale-image").toggle(!isOver); 
} 

$("a.mylink").hover(swap, swap); 

Answer 2

NO Jquery nécessaire. Utilisez le :hover pseudo sur css l'ancre .myLink, comme:

.color-image { 
    display:none; 
} 

a.myLink:hover .color-image { 
    display: block; 
} 

a.myLink:hover .greyscale-image { 
    display: none; 
} 

Answer 3

Vous pouvez le faire avec css: vol stationnaire. Passez la souris sur l'image en échelle de gris, affichez: none et l'inverse pour l'image en couleur. Cela a l'avantage de fonctionner lorsque JS est désactivé. Sinon, vous pouvez regarder dans l'interface utilisateur JQuery

Answer 4

Ma façon: p

a[class="mylink"]:not(:hover) img[class*="greyscale"], 
a[class="mylink"]:hover img[class*="color"] { 
    display: inline-block; 
} 
a[class="mylink"]:not(:hover) img[class*="color"], 
a[class="mylink"]:hover img[class*="greyscale"] { 
    display: none; 
} 

Voici une démo jsFiddle

http://jsfiddle.net/agaex70r/

Voici une autre jsFiddle avec une transition.

http://jsfiddle.net/agaex70r/2/