html - CSS 删除 href 来自父图像的间隙处的链接

Question

我有一张带有链接的图片。然后我有一个内联对齐的圆形元素符号图像，它们放置在带有链接的父图像上。当用户尝试点击元素符号时，有时他们可能会错过一小段距离并意外点击图像链接(不是元素符号)。所以我希望元素符号点之间的那些空白根本没有链接，但它们仍然有来自背景的链接。

代码是基本的，像这样:

<ul class="bullets2" style="position:relative;bottom:25px;left:50px">
    <li><a href="javascript:alert('CLICK BULLET')"></a></li>
    <li><a href="javascript:alert('CLICK BULLET')"></a></li>
    ...
</ul>

还有CSS样式，你可以看看代码示例。

下图展示了我想要实现的目标。

这是 jsFiddle: http://jsfiddle.net/RCkFL/

---

更新

没有一个解决方案有效，所以我使用了 <map>结合<area>创建多边形热点解决了我的问题。感谢所有的回答，无论如何，我希望有人仍然会为我原来的问题提出解决方案，因为 CSS 方法要好得多。谢谢。

Answer 1

我会在图像上放置一个带有元素符号的 a 并给那个 div 一个填充(用于更多“非 href”空间。

没试过，但应该可以。