如何使用：将鼠标悬停在图像映射区域上以显示新图像？

Question

我是 HTML 和 CSS 的新手，我正在尝试制作一个包含不同图像的图像地图，当您将鼠标悬停在特定区域时会显示这些图像。我已经看过几个例子，但没有什么是有效的，尽管我确信我只是遗漏了一些明显的东西。图像贴图本身工作正常，但我不知道如何让图像在悬停时发生变化。

目前的情况是在 jsfiddle here.

这里肯定有问题，但我不知道是什么。

.misc {
  position: relative;
  width: auto;
  height: auto;
  background: transparent;
}

.misc:hover {
  position: absolute;
  background-image: url('https://i.ibb.co/ch71VJm/miscellaneous.png');
}

所有图片大小相同。当鼠标位于相应的多边形内时，我基本上只想用相同尺寸的不同图像替换主图像。我可以为其他图像分配单独的类并以某种方式显示和隐藏它们吗？ 我绝对愿意为此使用 JQuery，但我也没有成功，所以它不包含在小提琴中。

提前非常感谢您的救生帮助。

编辑：我有一个更新的小提琴我在JQuery中尝试的其他东西。

我不明白为什么这个行得通，而这个行不通：

$(".interactive").on("mouseenter", function(){
    ('.portfolio').attr("src", "https://i.ibb.co/s32mqsM/interactive.png");
});

$(".interactive").on("mouseleave", function(){
    ('.portfolio').attr("src", "https://i.ibb.co/F59xHXy/portfolio.png");
});

编辑2：

https://jsfiddle.net/rn56Ljdo/

我在地狱。任何提示表示赞赏。

Answer 1

你不能专门为 .misc 类做这件事，因为它是图像的一部分。您可以使用 jquery 悬停更改图像的来源 HTML:

<img class="imagechange" src="https://i.ibb.co/F59xHXy/portfolio.png" usemap="#image-map" border="0" width=auto height=auto>

Javascript：

$('.imagechange').mouseover(function(){
$(this).attr("src", "https://i.ibb.co/ch71VJm/miscellaneous.png")})

希望对您有所帮助！