如何使用CSS单击整个div

Question

有时您希望将整个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的专有过滤属性给它一个仅IE的不透明度1% .

最后,在div中放入你想要的任何内容.如果您要使用z-index对内容进行分层,请确保不要为任何元素提供比链接更高的z-index.

Answer 1

您可以在链接中包装div,它是有效的HTML5.

<a href="#">
      <div></div>
</a>