有时您想将整个 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。