javascript - 将悬停鼠标悬停与图像映射相结合

Question

我正在尝试创建悬停鼠标悬停效果，其中 onMouseOver 元素是具有三个独立链接的单个图像。

我正在使用标准的 onMouseOver、onMouseOut 效果并尝试将其与图像映射结合 like this one .

我能得到的最接近的是鼠标悬停效果，其中链接仅在图像位于 onMouseOut 时显示，而当它位于 onMouseOver 时不显示链接。简而言之，有没有一种方法可以结合这两种效果，以便在 onMouseOver 图像上显示图像映射链接，从而使两种效果协同工作？

Here is an example显示我正在尝试解决的问题。要完全了解问题的要点，请尝试将鼠标从上到下缓慢地悬停在图像上。

Answer 1

执行此类操作的最佳方法是使用 CSS 和 :hover 选择器。

image {
   background-image:url('image1.png');
}

image:hover {
   background-image:url('image2.png');
}

当然，您在这里需要更多样式和适当选择的元素，以使它按照您喜欢的方式工作。