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

我有3个

.彩色图像
{
显示：无
}

为什么要使用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);

---

不需要Jquery。在

.myLink

锚定上使用

：hover

css伪命令，如：

.color-image {
    display:none;
}

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

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

---

您可以使用css:hover来实现这一点。将光标悬停在灰度图像上，显示：无，彩色图像显示相反。这有利于在禁用JS时工作。否则，您可以查看jqueryui

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

这里是一个演示JSFIDLE

这里是另一个带有转换的JSFIDLE

---

正如投票率最高的答案所说，你不需要JQuery来控制基于hoverThank的CSS，但是如果我想给它添加一个过渡效果呢？我仍然可以在css中完成它？有css转换不幸的是，我被卡住了，我希望我能得到一个关于如何在jquery中编写它的提示。为什么你如此坚持使用jquery？只要快速搜索

CSS转换效果示例

，就会得到大量结果。在JQuery中执行此操作可以更灵活地适应不同的场景，如上面的示例（减去一些过渡调整）将为您完成所有操作。@Damian我搜索过，但找不到适合这种情况的。我来自C#编程背景，对这些东西完全陌生。

a[class=“mylink”]：不是（：hover）

Yikes@espascarello难道你没听说过这种类型的课程吗？它太过分了，太贵了。本例中的所有选择器都是多余的。@Allan答案是正确的，但我使用的是bootstap，当出于某种非常奇怪的原因执行此操作时，第一个图像隐藏，第二个图像跳转并显示在另一个位置！我不知道人们为什么要使用Bootstap或者其他什么，它限制了用户太多，你需要遵守他们的规则。用真品要好得多。这就是我喜欢的想法。

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