css - 在鼠标悬停时更改图像地图的背景

Question

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

Answer 1

您使用单个图像作为导航栏是否有原因？

我会为每个导航链接使用单独的图像，而不是带有热点的单个图像。这样您就可以在悬停时轻松更改图像（或使用 CSS 图像定位）。此处对此进行了描述：

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

我敢肯定，还有许多其他地方。

Answer 2

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

相反，使用 CSS sprites：单个图像文件，将其作为背景图像添加到菜单链接，但背景图像的位置不同。有关更多信息，请参阅此第 25 行教程。