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

【问题标题】：How do you make a div a clickable link with HTML5/CSS3 only?如何使 div 成为仅使用 HTML5/CSS3 的可点击链接？
【发布时间】：2019-03-01 20:18:47
【问题描述】：

这是一个与时间一样古老的问题，因此问题的答案也与时间一样古老。
我尝试了很多解决方案，但都没有达到我想要的效果。

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

【问题讨论】：

定义“可点击”。你想发生什么？您希望什么时候发生这种情况？
“使 div .content1 完全可点击，无需任何文本样式”可点击做什么？将 .content 放大到全屏？你可以使用 Javascript 吗？你想用:feature 做什么？
@el-teedee :feature 是一个功能 ;-)
@Martin Clickabke 作为网站另一页面的链接。没有 JS。 :feature 是我检查过的网站之一告诉我要做的。
stackoverflow.com/a/17354432/912046 将 DIV 包裹在 A 中在 HTML5 中有效。如果有帮助...

标签： html css clickable

【解决方案1】：

你需要把锚标签放在div外面。

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

【讨论】：

不幸的是，它仍然将文本放在顶部的一个小框中（i.imgur.com/FaYOHeZ.png）
抱歉，我看不到您的图片。哪个文字是“我们的产品”？
上面写着“文本”，在最上面
我猜这是因为你在<a> 及其子<div> 上都有“content1”类。顶部的小切片可能是<div>。
@ElliottEvans 能否更新代码 sn-p 以反映此更改。

【解决方案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>

【讨论】：