相同的图像不同的悬停区域答案

【问题标题】：Same image different hover areas相同的图像不同的悬停区域
【发布时间】：2012-08-08 07:42:37
【问题描述】：

以下是否可能：

我有一个图像，我希望在其中有不同的悬停“检测”区域，而不会将图像切成与我想要的悬停区域相同数量的片段。这是一种已知的技术还是更喜欢对图像进行切片？

例如：http://postimage.org/image/v6riryiov/

如果推荐以上方法，我该如何完成？

【问题讨论】：

标签： jquery hover area

【解决方案1】：

您可以拥有一个以该图像作为背景的容器，然后在该容器内定义 4 个divs，每个具有不同的 id，分别为 width 和 height。类似于以下内容：

<div id="container">
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</div>

CSS

#container { width:800px; height:800px; background:url(path/to/img.png) no-repeat }
#container > div { height:800px }
#d1, #d2 { width: 300px }
#d3 { width: 100px }
#d4 { width: 200px }

【讨论】：

啊，聪明，我怎么没想到。谢谢！
你可以通过点击我的答案旁边的空心“V”符号来感谢我:)

【解决方案2】：

在图像上放置绝对定位的 Div！

你应该用一个相对的 div 来包裹图片！

<div style="position: relative;">
<img />
<div id="area1" style="position absolute; top:yourvalue; left: yourvalue;"></div>
<div id="area2" style="position absolute; top:yourvalue; left: yourvalue;"></div>
</div>

【讨论】：