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>

如何使用CSS单击整个div

1 个答案: