使用 css 使用图像映射更改悬停图像

Question

我有一个图像映射，我想制作它，以便当一个人将鼠标悬停在某个部分上时，会加载不同的图像。我已经搜索过，但找不到任何东西，所以如果你能将我链接到一个很好的答案。如果没有，我更喜欢纯 CSS 解决方案。如果那是不可能的，请详细介绍实现 javascript/jquery，因为我也没有这方面的经验。

这是我的 HTML：

    <img src="image.jpg" alt="" usemap="map">
    <map name="quadlinemap">
        <area shape="circle" coords="105,92,77" href="image1.jpg">
        <area shape="circle" coords="795,88,77" href="image2.jpg">
        <area shape="circle" coords="106,309,77" href="image3.jpg">
        <area shape="circle" coords="801,322,76" href="images4.jpg">
    </map>

我不太确定 href 会发生什么，也不知道要使用什么 CSS。提前致谢

Answer 1

据我了解，您有一组图像，并且您希望在将鼠标悬停在图像上时显示不同的图像。你可以用纯 CSS 来做到这一点。您可能可以使用 javascript 找到更简单的解决方案，但这是我的尝试。 在这种情况下，您的 Html 将类似于

<img src="image.jpg" alt="" usemap="map">
<map name="quadlinemap">
    <area class="one" shape="circle" coords="105,92,77">
    <area class="two" shape="circle" coords="795,88,77">
    <area class="three" shape="circle" coords="106,309,77">
    <area class="four" shape="circle" coords="801,322,76">
</map>

和 CSS

.one {
width: 100px;
height: 100px;
background: url('image1.jpg');
}

.one:hover {
background: url('image1_when_hover.jpg');
}

图片二、三、四类似

PS：我没有尝试这个代码。您可能玩过 z-index 值。