如何使用 CSS 使整个 div 可点击 [关闭]

Posted 2023-04-13

【中文标题】如何使用 CSS 使整个 div 可点击 [关闭]

【英文标题】：How to make an entire div clickable with CSS [closed]

【发布时间】：2013-06-25 14:47:44

【问题描述】：

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

【问题讨论】：

不错。有什么问题？

那么问题是什么？ *** 不是论坛，它是提出问题，而不是发布解决方案。

如果你想同时发布一个问题和一个答案，那很好，但这样做的方法是将问题作为问题发布，然后将答案作为答案发布。然后，您可以接受自己的答案是正确的。常见问题解答说“询问和回答您自己的编程问题也很好”（但您应该将其格式化为问题和答案）。

【参考方案1】：

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

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

【讨论】：

FWIW：在 A 元素中包装块级元素可能会导致一些旧的（HTML5 之前的）浏览器出现问题，因为它们处理链接包装块级元素的过时纠错算法作为语法错误。我无法提供确切的版本（可能是 IE7/8），但上次我尝试将块级元素（如 DL）包装在 A 元素（如 <a href="#"><dl><dt>...</dt><dd>...</dd></dl></a>）中，我不是能够在不同的浏览器中保持一致的样式，所以我不得不用多个 inline-by-nature SPAN 放置在链接内的元素替换 DL/DT/DD。