点击进入子图层答案

【问题标题】：Clicking through to sublayers点击进入子图层
【发布时间】：2014-08-20 10:23:19
【问题描述】：

我有一个人体模型的 HTML 图像。图像映射定义身体部位。我在图像地图顶部有两个 div，一个显示悬停选择，一个显示当前（活动部分）。我遇到的问题是：当一个部分被标记为“活动”时，我将背景重新定位在“活动”图层上以显示突出显示的背景图像（使用不同颜色的精灵图。当我显示“活动”状态时，我无法点击它的透明部分来选择不同的部分。

一种可能的解决方案是使用pointer-events，但我希望尽可能保持兼容。

【问题讨论】：

标签： html css z-index transparency sprite

【解决方案1】：

当一个 div 有 opacity:0;为了使其透明，它仍然在其他 div 之上。这样下面的div就不能点击了。

这可以通过将 div 的显示模式更改为隐藏来解决。这样 div 将被“移除”，并且 div 位于下方将是可点击的。

如果您希望能够点击图像的透明部分，请尝试将它们用作 .PNG 文件。

-不确定这是否对您有帮助-

【讨论】：

背景图片是PNG文件。具有“活动”状态的精灵图覆盖在下面的背景上，所以如果我将其设置为可见性：隐藏，我将无法看到它（并且它不会指示“活动”状态）
有点难以帮助你，因为我没有一个例子。对不起。

【解决方案2】：

如果无法查看代码或图表，很难将问题可视化，但我有 tried something in JSFiddle 可能会有所帮助。

在我创建的示例中，“悬停”元素在“活动”元素覆盖它的地方开始不可点击（但在它未被覆盖的地方可点击）。单击 'hover' 元素后，它的 z-index 属性会发生变化，以便它出现在其他元素的顶部。您可以看到它有效，因为它随后在任何地方都可以点击。