你如何使div的区域可点击?不是整个div!

时间:2009-11-13 11:12:40

标签: css xhtml hyperlink html

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

干杯

4 个答案:

答案 0 :(得分:9)

试试这段代码:

#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>

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

答案 1 :(得分:6)

简而言之 - 你没有。

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

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

答案 2 :(得分:6)

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

答案 3 :(得分:2)

您可以将div设置为“position:relative”,然后放置一个&lt; a&gt;使用

在图纸上标记
display: block;
width: your_width;
height: your_height;
position: absolute;
left: your_position_x;
top: your_position_y;

这将是最干净的方式。