有时候你想要将整个 div （或其他元素）变成可点击的链接，这是一个示例。
以下是一种使用纯 CSS 实现的跨浏览器方式：
首先，给包含div设置position属性。这样，当我们将“position:absolute;”应用于链接（见下一段）时，它会相对于包含的div定位。
接下来，使链接绝对定位，并且与包含div的大小和深度完全相同。链接的z-index确保它在该div中处于最上层，因此无论您点击哪里，都是点击链接。
自然地，IE有一些怪癖。在这种情况下，IE需要为此类链接设置背景颜色才能点击，因此我们设置了一个背景颜色（白色），将不透明度设置为0，然后使用IE的专有filter属性将其设置为1%的不透明度。
最后，在div中放置任何您想要的内容。如果您将使用z-index分层内容，请确保没有任何元素比链接具有更高的z-index值。
以下是一种使用纯 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属性。这样，当我们将“position:absolute;”应用于链接（见下一段）时，它会相对于包含的div定位。
接下来，使链接绝对定位，并且与包含div的大小和深度完全相同。链接的z-index确保它在该div中处于最上层，因此无论您点击哪里，都是点击链接。
自然地，IE有一些怪癖。在这种情况下，IE需要为此类链接设置背景颜色才能点击，因此我们设置了一个背景颜色（白色），将不透明度设置为0，然后使用IE的专有filter属性将其设置为1%的不透明度。
最后，在div中放置任何您想要的内容。如果您将使用z-index分层内容，请确保没有任何元素比链接具有更高的z-index值。