如何使div仅是HTML5 / CSS3的可点击链接？

Question

T'是一个与时间一样古老的问题 ，因此，该问题的答案也与时间一样古老。
我尝试了许多解决方案，但都没有按照我想要的方式工作。

我试图使div .content1完全可单击的链接，而没有任何文本或JS样式。
你有什么建议吗？

 body { background-image: url("Images/background-bean.jpg"); background-size: contain; } h1 { background-image: url("Images/background-bean.jpg"); } p { background-color: white; background-color: rgba(255, 255, 255, .85); } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 400px 400px 50px; grid-gap: 8px; background-image: url(Images/content/background_bean.jpg) } .nav { grid-column-start: 1; grid-column-end: 3; color: white; } .content1, .content2, .content3, .content4 { background-color: #60330A; width: 100%; background-position: center; text-align: center; } .social { grid-column-start: 1; grid-column-end: 2; color: white; } .footer { grid-column-start: 2; grid-column-end: 3; color: white; text-align: right; } .content1 { background-image: url(Images/content/c1standin.jpg) } .content1:hover { transform: scale(1.05); } .content2 { background-image: url(Images/content/c2standin.jpg) } .content2:hover { transform: scale(1.05); } .content3 { background-image: url(Images/content/c3standin.jpg) } .content3:hover { transform: scale(1.05); } .content4 { background-image: url(Images/content/c4standin.jpg) } .content4:hover { transform: scale(1.05); } .a .content1:feature { position: relative; } .content1:feature a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; /* No underlines on the link */ z-index: 10; /* Places the link above everything else in the div */ background-color: #FFF; /* Fix to make div clickable in IE */ opacity: 0; /* Fix to make div clickable in IE */ filter: alpha(opacity=1); /* Fix to make div clickable in IE */ } 

 <div class="container"> <div class="nav"><span class="bold">NAV</span> </div> <div class="content1"> <a title="Our Products" class="content1" id="header-img" href="Images/content/c1standin.jpg"></a> </div> <div class="content2">CONTENT</div> <div class="content3">CONTENT</div> <div class="content4">CONTENT</div> <div class="social">SOCIALMEDIA</div> <div class="footer"> <h6>Image Credit pixabay.com; Elliott Evans 2019</h6> </div> </div> 

Answer 1

您需要将锚标记放在div之外。

<a title="Our Products" class="content1" id="header-img" href="Images/content/c1standin.jpg">
 <div class="content1"></div>
</a>

Answer 2

正如Rohit Shetty回答的那样 ，您可以将<div>元素包装在<a>元素中 ，而不是相反。 另请参见使整个Div可单击 。 这是一个例子：

 .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 400px 400px; grid-gap: 8px; } .content { background-color: #60330A; width: 100%; background-position: center; background-size: cover; text-align: center; transition: transform .3s; } .content:hover { transform: scale(1.05); } .content1 { background-image: url('https://picsum.photos/200/300?1') } .content2 { background-image: url('https://picsum.photos/200/300?2') } .content3 { background-image: url('https://picsum.photos/200/300?3') } .content4 { background-image: url('https://picsum.photos/200/300?4') } 

 <div class="container"> <a class="content content1" title="Our Products" href="https://www.example.com"> <div>OUR PRODUCTS</div> </a> <a class="content content2">CONTENT</a> <a class="content content3">CONTENT</a> <a class="content content4">CONTENT</a> </div> 

另外（但可能不必要），为了使您的<a>元素填充其父<div>元素，您可以将其大小设置为width:100%和height:100% ，如下所示：

 .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 400px 400px; grid-gap: 8px; } .content { background-color: #60330A; width: 100%; background-position: center; background-size: cover; text-align: center; transition: transform .3s; } .content:hover { transform: scale(1.05); } .content a { display: block; width: 100%; height: 100%; } .content1 { background-image: url('https://picsum.photos/200/300?1') } .content2 { background-image: url('https://picsum.photos/200/300?2') } .content3 { background-image: url('https://picsum.photos/200/300?3') } .content4 { background-image: url('https://picsum.photos/200/300?4') } 

 <div class="container"> <div class="content content1"> <a title="Our Products" href="https://www.example.com">OUR PRODUCTS</a> </div> <div class="content content2">CONTENT</div> <div class="content content3">CONTENT</div> <div class="content content4">CONTENT</div> </div> 

但是，除非有特殊的原因需要额外的<div> ，否则我建议删除它们并仅在网格中使用<a>元素：

 .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 400px 400px; grid-gap: 8px; } .content { background-color: #60330A; width: 100%; background-position: center; background-size: cover; text-align: center; transition: transform .3s; } .content:hover { transform: scale(1.05); } .content1 { background-image: url('https://picsum.photos/200/300?1') } .content2 { background-image: url('https://picsum.photos/200/300?2') } .content3 { background-image: url('https://picsum.photos/200/300?3') } .content4 { background-image: url('https://picsum.photos/200/300?4') } 

 <div class="container"> <a class="content content1" title="Our Products" href="https://www.example.com">OUR PRODUCTS</a> <a class="content content2">CONTENT</a> <a class="content content3">CONTENT</a> <a class="content content4">CONTENT</a> </div>