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

Question

如果div中有背景图像，中间有（绘制）按钮，周围有一些其他图形。你如何使按钮可点击但不是整个div因为我不希望用户点击它周围的图纸，如果这是有道理的！？我是在浪费时间玩填充物和边距？我应该创建两个div吗？我的老板说他之前已经设法使用一个div。

干杯

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>

显然，更改所有尺寸以匹配您想要点击的区域。

Answer 2

简而言之 - 你没有。

背景是背景。他们不满足。它们不是互动的。

有可能破解这一点，但你不应该。如果您有一些内容供用户与之交互，请将其作为内容呈现。使用<img>。

Answer 3

放置一个透明且相对位于div内部的元素。将它放在按钮的顶部，使其与按钮的大小相同。使元素可单击。

Answer 4

您可以将div设置为“position：relative”，然后放置一个＆lt; a＆gt;使用

在图纸上标记

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

这将是最干净的方式。