How to expand 'a'-link to a whole div without jQuery or JavaScript?

Question

There are two divs with an image and hyperlink in each. The goal is to force each div to be an entire hyperlink - without jQuery, JavaScript or Onclick function.

What do I have now:

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

How can I reach this?

Possible duplicate of [Make a div into a link](http://stackoverflow.com/questions/796087/make-a-div-into-a-link) — Abhijeet, Sep 19 '16 at 14:51

score 1 · Answer 1 · answered Sep 19 '16 at 16:18

You can see the changes I've made as they are the CSS rules indented to the left. In short you need to make the font awesome icons absolutely positioned so the link element can take up the whole box area.

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

How to expand 'a'-link to a whole div without jQuery or JavaScript?

1 Answers1