Question

可能重复：
Link into full div - html and css

我正在尝试构建CSS，其中<a>标记覆盖整个<div>块，以便可以点击<div>上的任何位置。

以下是最终div的外观（图像为64×64px）：

enter image description here

这是HTML：

    <div>
        <img src="" alt=""/>
        <h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
        <span class="details">Save 10% off all package holidays</span>
    </div>

任何CSS大师的帮助？

Answer 1

可能你可以这样写：

<a href="#">
        <img src="" alt=""/>
        <h3><span>On The Beach</span> <span class="exclusive">Exclusive</span></h3>
        <span class="details">Save 10% off all package holidays</span>
    </a>

<强> CSS

a{
 display:block;
}

注意：根据html5，您可以在<a>标记内定义块元素

Answer 2

如果你想锚定覆盖整个块，你的HTML应该反映出来。虽然块级锚点是XHTML2 / HTML5的新概念，但它们几乎适用于所有现代浏览器（甚至是IE 7）。

用锚点封装所有DIV的内容：

<div>
    <a href="#nohref">
        <img src="" alt="" />
        <h3>On The Beach <span class="exclusive">Exclusive</span></h3>
        <span class="details">Save 10% off all package holidays</span>
    </a>
</div>


div a {
    display: block;
}

另请参阅：http://html5doctor.com/block-level-links-in-html-5/

有光泽，但不是新的

这项技术的另一个非常有趣的事实是，这并不是新的：你现在可以做到。 [...]这是关于HTML 5的一个有趣的事情 - 它记录了现有的浏览器行为。由于浏览器已经处理了块级元素周围的包装链接，并且有一个明显的用例，因此没有理由人为地将结构保持为无效。

Answer 3

用锚标签包裹

 <div>
 <a href="#" class="cont-wrap-link">
 <img src="" alt=""/>
 <h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
 <span class="details">Save 10% off all package holidays</span>
 <a>
 </div>

<强> CSS

div a.cont-wrap-link
{padding:0px; margin:0px;
 display:block;
 text-decoration:none;
}

Answer 4

查看此 Post

记住：确保在CSS不存在时文档的结构仍然有意义。

<强>更新

您可以使用 HTML5 实现此目标。查看this

Answer 5

看到您的doctype是HTML5，您可以将整个块包装在一个锚中：

<a href="yourURL">
<div>
        <img src="" alt=""/>
        <h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
        <span class="details">Save 10% off all package holidays</span>
    </div>
</a>

不需要任何JS：）

Answer 6

虽然这可能是用一些hacky CSS完成的，但我相信JS（jQuery）在这种情况下更容易：

$('#the-div').click(function () {
    $(this).find('a').eq(0).click();
});

或类似的东西：

var theDiv = document.getElementByID('the-div');

theDiv.onclick = function () {
    window.location = theDiv.getElementsByTagName('a')[0].href;
};

Answer 7

我建议将onclick="location.href='http://google.com';" style="cursor:pointer;"添加到div标签。

用于覆盖div块的CSS链接

7 个答案: