隱藏/取消隱藏圖像使用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/