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

Question

像这样突出显示地图/平面图的特定区域的 HTML CSS 解决方案是什么？

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

Answer 1

他们使用 sprite image看这里。

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

1. 带有深蓝色区域的地图是完全静态的。
2. 在他们的案例中，它上面有一个由小矩形制成的不可见层<a>——每个都对应于单个深蓝色区域并拥有自己的id.
3. 当光标放在一个矩形上时id x，精灵图像与其背景很好地对齐（通过设置 CSS's background-position）。

不要想，如果不使用 JavaScript，这个魔法就可以实现。