如何使 div 区域可点击？而不是整个区域！

Question

如果您在一个div中有一个背景图像，其中有一个（绘制的）按钮在中间，周围还有其他绘画。如何使按钮可点击但不是整个div，因为我不希望用户单击其周围的绘画，如果这有意义！？ 我是否在浪费时间使用填充和边距？我应该只创建两个div吗？我的老板说他以前曾经使用一个div来实现它。

干杯

- Cool Hand Luke

Answer 1

尝试这段代码：

#container { width:200px; height:100px; position:relative }
#clicker { display:block; width:20px; height:10px; position:absolute; top:20px; left:100px; }

<div id="container">
    <a id="clicker" href="#link"></a>
</div>

显然，需要根据你想要设置可点击区域的大小来改变所有尺寸。

- Piotr

Answer 2

简而言之，你不需要这样做。

背景只是背景，不是内容，也不具备交互性。

虽然有办法绕过这个限制，但你不应该这样做。如果你有一些用户可以与之交互的内容，那么请将其呈现为内容，使用 标签即可。

- Quentin

---

我理解并且通常我会这样做，但是在这种情况下不可能！ - Cool Hand Luke

Answer 3

在 div 中放置一个透明且相对定位的元素。将其定位在按钮顶部，并使其与按钮大小相同。使该元素可点击。

- rahul

---

这也是我的想法，只是想知道是否有其他方法可以实现！干杯 - Cool Hand Luke

Answer 4

您可以将 div 的 "position" 属性设为 "relative"，然后使用 <a> 标签来放置图形。

display: block;
width: your_width;
height: your_height;
position: absolute;
left: your_position_x;
top: your_position_y;

那将是最干净的方式。

- Pekka