在鼠标悬停时更改图像映射的背景

Question

在我的网站中，我有一个图像作为导航栏，并创建了热点以将它们链接到不同的页面。问题是因为文本是图像的一部分，我无法在悬停时改变文本的样式。虽然我希望文本/热点在鼠标悬停时脱颖而出，但我知道鼠标悬停时可以更改背景颜色。那可能吗？有没有办法在CSS中使用区域或地图来做到这一点。如果要使用Javascript，有人可以帮我解决它。

Answer 1

您是否有理由将单个图像用作导航栏？

我没有使用热点的单个图像，而是为每个导航链接使用单独的图像。这样，您可以在悬停时轻松更改图像（或使用CSS图像定位）。这在这里描述：

http://css-tricks.com/video-screencasts/7-three-state-menu/

以及其他许多我确定的地方。

Answer 2

我认为既不使用图像地图也不使用单个图像是个好主意。

相反，使用CSS精灵：单个图像文件，将其作为背景图像添加到菜单链接，但以不同方式定位背景图像。有关详细信息，请参阅this Line 25 tutorial。