使用 CSS 突出显示悬停时的图像区域

Posted 2023-03-06

【中文标题】使用 CSS 突出显示悬停时的图像区域

【英文标题】：Highlight image regions on hover with CSS

【发布时间】：2013-11-26 11:10:33

【问题描述】：

用于突出显示此类地图/平面图的特定区域的 html CSS 解决方案是什么？

http://www.centrecourtshopping.co.uk/store-info/

【问题讨论】：

做一些研究。自己试试。当您遇到困难时，请提出具体问题。没有人会编写已经遍布互联网的文档。只需谷歌 CSS 悬停，您就会发现大量有关如何操作的信息。如果你想隐藏和显示像这个网站这样的单位显示你也必须使用 javascript

【参考方案1】：

他们使用精灵图像look here。

基本上，它是这样工作的：

带有深蓝色区域的地图是完全静态的。 在其顶部有一个由小矩形组成的不可见层<a> - 每个对应于单个深蓝色区域并拥有自己的id。 当光标放在带有id x 的矩形上时，精灵图像与其背景很好地对齐（通过设置CSS 的background-position）。

别想，这个魔法不用 JavaScript 也能实现。

【讨论】：

感谢 Artur，感谢您的帮助。