3

可能重复：
链接到完整的 div - html 和 css

我正在尝试构建<a>标签覆盖整个<div>块的CSS，以便<div>可以点击任何地方。

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

在此处输入图像描述

这是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 大师的帮助？

4

7 回答 7

8

也许你可以这样写：

<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>标签内定义块元素

于 2012-09-18T09:05:12.783 回答
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 的有趣之处之一——它记录了现有的浏览器行为。由于浏览器已经处理围绕块级元素的包装链接，并且有一个明显的用例，没有理由人为地保持结构无效。

于 2012-09-18T09:06:58.230 回答
1

用锚标签包裹

 <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;
}
于 2012-09-18T09:05:22.677 回答
1

看看这篇 文章

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

更新

您可以使用HTML5实现此目的。检查这个

于 2012-09-18T09:23:26.060 回答
1

看到您的文档类型是 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 :)

于 2012-09-18T09:33:49.643 回答
0

虽然这可能可以用有点 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;
};
于 2012-09-18T09:03:24.247 回答
0

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

于 2012-09-18T09:05:15.003 回答