在鼠标悬停时更改图像地图的背景答案

【问题标题】：Change background of image maps on mouse hover在鼠标悬停时更改图像地图的背景
【发布时间】：2010-11-25 13:45:48
【问题描述】：

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

【问题讨论】：

因为是 2015 年并且大多数浏览器都支持 SVG，我建议使用 SVG 地图而不是图像地图。您可以使用... CSS 设置热点的样式。例如。 svg a { fill: palegoldenrod; } svg a:hover { fill: papayawhip; }

标签： css hover mouseover imagemap

【解决方案1】：

您使用单个图像作为导航栏有什么原因吗？

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

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

我相信还有很多其他地方。

【讨论】：

【解决方案2】：

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

改为使用 CSS 精灵：单个图像文件，将其作为背景图像添加到菜单链接，但背景图像的位置不同。请参阅this Line 25 tutorial 了解更多信息。

【讨论】：

这就是我所说的CSS图像定位，只是没有使用正确的术语，抱歉。
哦，等等，不太一样。该技术类似，但每个菜单选择都有一个单独的图像，包含图像的两个版本和三个位置。你的使用一张图像并改变水平和垂直偏移。必须阅读更多内容。