【问题标题】:Highlight image regions on hover with CSS使用 CSS 突出显示悬停时的图像区域
【发布时间】:2013-11-26 11:10:33
【问题描述】:

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

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

【问题讨论】:

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

标签: css svg


【解决方案1】:

他们使用精灵图像look here

基本上,它是这样工作的:

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

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

【讨论】:

  • 感谢 Artur,感谢您的帮助。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-01-19
  • 1970-01-01
  • 1970-01-01
  • 2012-02-04
  • 1970-01-01
  • 2018-07-31
  • 2013-12-18
相关资源
最近更新 更多