精确点击重叠 div

Posted 2023-02-25

【中文标题】精确点击重叠 div

【英文标题】：Precise clicking with overlapping divs

【发布时间】：2013-03-28 17:05:06

【问题描述】：

如果标题解释得不够清楚，我很抱歉，但这是我能想到的最能代表我的问题的标题。

所以我有两个 div：

.div-arrow

    position: absolute;
    float: left;
    cursor: pointer;
    display:block;
    width: 136px;
    height: 54px;
    vertical-align: middle;
    border-radius: 4px;
    background: url(ImagePathHere) no-repeat scroll 0px 0px transparent;
    zoom: 50%;


.div-diamond

    position: absolute;
    float: left;
    cursor: pointer;
    display: block;
    width: 83px;
    height: 54px;
    vertical-align: middle;
    border-radius: 4px;
    background: url(ImagePathHere) no-repeat scroll -272px 0px transparent;
    zoom: 50%;

我使用它们来制作这样的布局：http://i.stack.imgur.com/htFRd.png

单击红色标记所在的位置将激活绿色菱形，而不是看起来像您正在单击的菱形。我想知道如何修剪图像/div 的那些看不见的部分，以便您实际单击看起来像在单击的 div。

【问题讨论】：

你考虑过图像地图吗？

【参考方案1】：

网页上的所有元素本质上都是块 - 所以尽管您可以创建圆形或菱形等外观，但它实际上仍然是一个四边块元素。

对于您的问题，您可以考虑使用图像映射：

http://www.w3.org/TR/html401/struct/objects.html

或者可能使用 HTML5 CANVAS 方法：

https://developer.mozilla.org/en-US/docs/HTML/Canvas

【讨论】：

我已经研究过同时使用画布和图像映射，并选择了图像映射，因为它似乎更符合我的要求。原来激活错误钻石的问题不再存在，但仍然存在未激活正确钻石的问题。使用我原始问题中的相同示例，单击红点不会激活任何钻石，我认为这是一个重叠问题，因为每个钻石周围仍有一些区域是透明的，但被认为是图像的一部分。（1/2 )

有没有更好的方法让它识别它应该点击什么，或者我最好的选择是在每个地图中为每个透明区域添加一个区域来激活它看起来应该激活的东西？（ 2/2)

我只能认为你没有像你应该的那样设置图像映射。你用什么来创建图像映射？我推荐dreamweaver，你应该能够完全按照你的意愿映射图像的每个部分。

我已经在<map id="map"><area ...></map>之类的代码中做，我会检查dreamweaver，看看它是否有帮助