html - 如何在没有 jQuery 或 JavaScript 的情况下将 'a' -link 扩展到整个 div？

Question

有两个 div，每个都有一个图像和超链接。目标是强制每个 div 成为一个完整的超链接——无需 jQuery、JavaScript 或 Onclick 函数。

我现在有什么:

.near {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.previous,
.next {
  width: 50%;
  padding: 20px 30px;
  font-size: 1em;
  font-style: italic;
  font-weight: 400;
  cursor: pointer;
  align-items: center;
  display: flex;
  text-align: center;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 1px #5C3317;
}

.previous:hover,
.next:hover {
  box-shadow: 0 0 10px #5C3317;
  background: lightgreen;
}

.previous a,
.next a {
  color: #000;
}

.previous i {
  float: left;
  padding-right: .7em;
  align-self: center;
}

.next i {
  float: right;
  padding-left: .7em;
  align-self: center;
}

.text {
  width: 100%;
}

<script src="https://use.fontawesome.com/d91d412715.js"></script>
<div class="near">
  <div class="previous">
    <i class="fa fa-hand-spock-o fa-3x" aria-hidden="true"></i>
    <div class="text">
      <a href="http://google.com/">Hello</a>
    </div>
  </div>
  <div class="next">
    <div class="text">
      <a href="http://google.com/">Bye-bye</a>
    </div>
    <i class="fa fa-bicycle fa-3x" aria-hidden="true"></i>
  </div>
</div>

我怎样才能做到这一点？

Answer 1

您可以看到我所做的更改，因为它们是向左缩进的 CSS 规则。简而言之，您需要使字体很棒的图标绝对定位，以便链接元素可以占据整个框区域。

.near {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.previous,
.next {
  width: 50%;
  padding: 0;
  font-size: 1em;
  font-style: italic;
  font-weight: 400;
  cursor: pointer;
  align-items: center;
  display: flex;
  text-align: center;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 1px #5C3317;
}

.previous:hover,
.next:hover {
  box-shadow: 0 0 10px #5C3317;
  background: lightgreen;
}

.previous a,
.next a {
  color: #000;
display: block;
padding: 40px 60px;
}

.previous i {
  float: left;
  padding-right: .7em;
  align-self: center;
position: absolute;
top: 35px;
left: 35px;
}

.next i {
  float: right;
  padding-left: .7em;
  align-self: center;
position: absolute;
top: 35px;
right: 35px;
}

.text {
  width: 100%;
z-index: 2;
}

<script src="https://use.fontawesome.com/d91d412715.js"></script>
<div class="near">
  <div class="previous">
    <i class="fa fa-hand-spock-o fa-3x" aria-hidden="true"></i>
    <div class="text">
      <a href="http://google.com/">Hello</a>
    </div>
  </div>
  <div class="next">
    <div class="text">
      <a href="http://google.com/">Bye-bye</a>
    </div>
    <i class="fa fa-bicycle fa-3x" aria-hidden="true"></i>
  </div>
</div>