Question

我的html中有3个<a>标签，每个标签包含2张图片。仅显示grescale图像，其他图像设置为none。

当我将鼠标悬停在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

不需要Jquery。在:hover锚点上使用.myLink css伪，例如：

.color-image {
    display:none;
}

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

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

Answer 3

我的方式：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;
}

这是一个演示JSFiddle

http://jsfiddle.net/agaex70r/

这是另一个有过渡的JSFiddle。

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

Answer 4

你可以用css：hover做到这一点。将鼠标悬停在灰度图像上，显示：无，彩色图像反转。这具有在禁用JS时工作的好处。否则，您可以查看Jquery UI

在悬停时使用jquery隐藏/取消隐藏图像

4 个答案: