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

Question

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

我正在使用标准的 onMouseOver、onMouseOut 效果并尝试将其与像这样的图像映射结合起来。

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

这是一个示例，显示了我正在尝试解决的问题。要完全了解问题的要点，请尝试将鼠标从上到下缓慢地悬停在图像上。

score 0 · Accepted Answer

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

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

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

Of course, you'll need more styles here and appropriately selected elements to make this work the way you'd like.

1 回答 1