如何使用CSS使整个div可单击

有时，您希望将整个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 */
}

HTML：
div的其余内容放在这里
CSS:
div.clickable{/*包含div必须有一个位置值*/
位置：相对位置；
}
可点击分区a{
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
文本装饰：无；/*确保链接没有下划线*/
z-index:10；/*将锚定标记提升到div中所有其他标记之上*/
背景色：白色；/*在IE中可单击的解决方法*/
不透明度：0；/*使IE中可单击的解决方法*/
过滤器：alpha（不透明度=1）；/*使IE中可点击的解决方法*/
}

首先，给出包含div的位置。这样，当我们将“position:absolute；”应用于链接（见下一段）时，它将相对于包含的div定位自身

接下来，使链接处于绝对位置，并且包含div的完整大小和深度。链接的z索引确保它高于div中的所有其他内容，因此无论单击何处，都是在单击链接

当然，他也有怪癖。在这种情况下，IE需要一个背景色，这样一个链接才能被点击，所以我们给它一个背景色（白色），将不透明度设置为0，然后使用IE专有的过滤器属性给它一个IE-only不透明度1%

---

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

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

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

不错。问题是什么？那么问题是什么？Stackoverflow不是论坛，它是提问，而不是发布解决方案。如果你想发布一个问题和一个答案，那很好，但方法是将问题作为问题发布，然后将答案作为答案发布。然后你可以接受自己的答案是正确的。常见问题解答说“询问和回答您自己的编程问题也很好”（但您需要将其格式化为问题和答案）。FWIW：在

a

元素中包装块级元素可能会导致一些旧的（HTML5之前的）问题浏览器由于其过时的错误纠正算法，将块级元素的链接包装视为语法错误。我无法提供确切的版本（可能是IE7/8），但上次我尝试将块级元素（如

DL

）包装到

a

元素（如

）中时，我无法在不同浏览器中对其进行一致的样式设置，因此，我被迫将

DL/DT/DD

替换为多个inline-by-nature

SPAN

元素放置在link中。