Html 如何使 div 的区域可点击？不是整个div！
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1728590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you make the area of a div clickable? Not the whole div!
提问by Cool Hand Luke
If you have a background image in a div with a (drawn) button in the middle and some other drawings around it. How do you make the button clickable but not the whole div because I don't want the user to click the drawings around it, if that makes sense!? I am I wasting my time playing with padding and margins? Should I just create two divs? My boss says he has managed to make it using one div before.
如果您在 div 中有一个背景图像，中间有一个（绘制的）按钮，周围有一些其他图形。你如何使按钮可点击而不是整个 div，因为我不希望用户点击它周围的图纸，如果这有意义的话！？我是在浪费时间玩填充和边距吗？我应该只创建两个 div 吗？我的老板说他以前用一个 div 就成功了。
Cheers
干杯
采纳答案by rahul
Put an element which is transparent and relatively positioned inside the div. Position it at the top of the button and make it the same size as the button. Make the element click able.
在 div 内放置一个透明且相对定位的元素。将其放置在按钮的顶部并使其与按钮的大小相同。使元素可以点击。
回答by rochal
Try this code:
试试这个代码：
#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>
Obviously change all dimensions to match the area you want to make clickable.
显然，更改所有尺寸以匹配您要使其可点击的区域。
回答by Quentin
In short — you don't.
简而言之 - 你没有。
Backgrounds are backgrounds. They aren't content. They aren't interactive.
背景就是背景。他们不满足。它们不是交互式的。
It is possible to hack around that, but you shouldn't. If you have some content for the user to interact with, then present it as content. Use an <img>.
可以绕过它，但你不应该。如果您有一些内容供用户交互，则将其显示为内容。使用<img>.
回答by Pekka
You could make the div "position: relative" and then place an <a> tag on the drawing using
您可以使 div“位置：相对”，然后使用 <a> 标记在绘图上
display: block;
width: your_width;
height: your_height;
position: absolute;
left: your_position_x;
top: your_position_y;
That would be the cleanest way.
那将是最干净的方式。
