【发布时间】：2013-06-25 14:47:44
【问题描述】：
有时您希望将整个 div（或其他元素）制作成可点击的链接。这是一个例子。
这是一种使用纯 CSS 的跨浏览器方式：
HTML:
<div class="clickable">
<a href="URL_OF_LINK_TARGET"> </a>
Rest of div content goes here
</div>
CSS:
div.clickable { /* Containing div must have a position value */
position:relative;
}
div.clickable a {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none; /* Makes sure the link doesn't get underlined */
z-index:10; /* raises anchor tag above everything else in div */
background-color:white; /*workaround to make clickable in IE */
opacity: 0; /*workaround to make clickable in IE */
filter: alpha(opacity=1); /*workaround to make clickable in IE */
}
首先，给出包含 div 的位置。这样，当我们应用“position:absolute;”时到链接（参见下一段），它将相对于包含的 div 定位自身。
接下来，将链接设置为绝对定位以及包含 div 的完整大小和深度。链接的 z-index 确保它高于 div 中的所有其他内容，因此无论您点击哪里，您都在点击该链接。
IE 自然有一些怪癖。在这种情况下，IE 需要一个背景颜色才能使此类链接可点击，因此我们给它一个背景颜色（白色），将不透明度设置为 0，然后使用 IE 的专有过滤器属性给它一个 1% 的 IE 不透明度.
最后，在 div 中放入任何你想要的内容。如果您要使用 z-index 对内容进行分层，请确保不要为任何元素提供比链接更高的 z-index。
【问题讨论】：
-
不错。有什么问题？
-
那么问题是什么？ Stackoverflow 不是论坛，它是提出问题，而不是发布解决方案。
-
如果你想同时发布一个问题和一个答案，那很好，但这样做的方法是将问题作为问题发布，然后将答案作为答案发布。然后，您可以接受自己的答案是正确的。常见问题解答说“询问和回答您自己的编程问题也很好”（但您应该将其格式化为问题和答案）。