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

Question

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

我正在使用标准onMouseOver，onMouseOut效果并尝试将其与图片地图like this one结合使用。

我能得到的最接近的是MouseOver效果，其中链接仅在图像位于onMouseOut时显示，并且在onMouseOver时不显示链接。简而言之，有没有办法将这两种效果结合起来，以便在onMouseOver图像上显示图像映射链接，以便两种效果一起工作？

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

Answer 1

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

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

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

当然，你需要更多样式和适当选择的元素，以便按照你想要的方式工作。