隐藏/取消隐藏图像使用jQuery的悬停

Question

我有3 <a>标签在我的HTML和他们每个包含2个图像。只显示高分辨率图像，其他图像设置为无。

我想隐藏灰度图像，当我将鼠标悬停在grescale图像上并显示彩色图像时。而当我悬停时，我想要彩色图像再次隐藏。我如何使用jQuery来做到这一点？

<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

为什么使用jQuery而不是纯CSS？

您可以使用：悬停并切换图像的显示。

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

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

在jQuery中，这只是

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的需要。使用:hover CSS伪上.myLink锚，如：

.color-image { 
    display:none; 
} 

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

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

Answer 3

你可以用CSS这样做：悬停。悬停在灰度图像上，显示：无，彩色图像反色。当JS被禁用时，这有利于工作。否则，你可以看看jQuery UI的

Answer 4

我的方式：对

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; 
} 

这里是一个演示的jsfiddle

http://jsfiddle.net/agaex70r/

这里是另一个的jsfiddle与过渡。

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