你如何使用HTML5 / CSS3创建一个可点击的链接？

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

你需要在div之外放置锚标签。

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

Answer 2

作为answered by Rohit Shetty，你可以wrap your <div> elements in <a> elements，而不是相反。另见Make Entire Div Clickable。这是一个例子：

.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>