html - 仅使用 HTML5/CSS3 如何使 div 成为可点击的链接？

Question

这是一个与时间一样古老的问题，因此问题的答案也与时间一样古老。
我尝试了很多解决方案，但没有一个以我想要的方式工作。

我正在尝试制作 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

你需要把 anchor 标签放在div之外。

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