CODEWITHSUNDEEP
htmlcss
Alexander Solonik
Alexander Solonik

Reputation: 10230

anchor tag not clickable unless absolute positioned?

I have the following HTML:

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700,900);

/* global css */

body {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  padding: 0;
  margin: 0;
}
.col-md-4 {
  width: 33.33%;
  float: left;
}
.info-boxes {
  display: block;
  position: relative;
  background: #7accc8;
  padding: 2em 0;
  overflow: hidden;
  text-align: center;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes h5 {
  font-size: 30px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
}
.info-boxes p {
  margin: 0.5em 0;
}
.info-boxes h5,
.info-boxes p {
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
}
.info-boxes:hover h5,
.info-boxes:hover p {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span {
  display: inline-block;
  font-weight: 700;
  position: relative;
  /*	position: absolute;
    	bottom: 0;
    	left: 0;
    	right: 0;
    */
  /*left: 50%;
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
    	-o-transform: translateX(-50%);
    	transform: translateX(-50%);*/
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -o-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes:hover {
  background: #f5989d;
}
.info-boxes:hover span {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span:before,
.info-boxes span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 100%;
  height: 1px;
  background: #fff;
  /*-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
    	-o-transform: translateY(-50%);
    	transform: translateY(-50%);*/
  -webkit-transition: all .3s ease .2s;
  -o-transition: all .3s ease .2s;
  transition: all .3s ease .2s;
  opacity: 0
}
.info-boxes span:after {
  right: initial;
  left: 50%;
}
.info-boxes:hover span:after,
.info-boxes:focus span:after,
.info-boxes:active span:after {
  left: calc(100% + 10px);
  opacity: 1;
}
.info-boxes:hover span:before,
.info-boxes:focus span:before,
.info-boxes:active span:before {
  right: calc(100% + 10px);
  opacity: 1;
}
<a class="info-boxes">
  <h5>2200AED</h5>
  <p>5 Private Sessions / Validity: 2 Months</p>
  <span>Online Booking</span>
</a>

Now why is the a not a anchor any more I.E. i can't click on the <a> anymore, why?

Now the one solution that I found to this was that change the container to a div tag and inside have an a and apply the following styles to it:

.info-boxes a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 99;
}

But this is a "Why" question not a "How to solve this" question.

So what I'd like to ask is why is the <a> tag not acting like one , in this given example?

Upvotes: 0

Views: 296

Answers (3)

midudev
midudev

Reputation: 1061

A possible answer, as you don't specify if you want to go to another page or only to do something when clicking.

You should use a button tag instead. Why? Well, you should use an anchor link <a> if it goes to a page by specifing href property. If it is clickable, it has to do something BUT doesn't go to another page you should be using a button tag instead.

Upvotes: 1

dippas
dippas

Reputation: 60553

you need to add the href otherwise the a won't be clickable

if you are NOT using the href then it is considered only a placeholder hyperlink, see more here on W3C

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700,900);

/* global css */

body {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  padding: 0;
  margin: 0;
}
.col-md-4 {
  width: 33.33%;
  float: left;
}
.info-boxes {
  display: block;
  position: relative;
  background: #7accc8;
  padding: 2em 0;
  overflow: hidden;
  text-align: center;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes h5 {
  font-size: 30px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
}
.info-boxes p {
  margin: 0.5em 0;
}
.info-boxes h5,
.info-boxes p {
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
}
.info-boxes:hover h5,
.info-boxes:hover p {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span {
  display: inline-block;
  font-weight: 700;
  position: relative;
  /*	position: absolute;
    	bottom: 0;
    	left: 0;
    	right: 0;
    */
  /*left: 50%;
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
    	-o-transform: translateX(-50%);
    	transform: translateX(-50%);*/
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -o-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes:hover {
  background: #f5989d;
}
.info-boxes:hover span {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span:before,
.info-boxes span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 100%;
  height: 1px;
  background: #fff;
  /*-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
    	-o-transform: translateY(-50%);
    	transform: translateY(-50%);*/
  -webkit-transition: all .3s ease .2s;
  -o-transition: all .3s ease .2s;
  transition: all .3s ease .2s;
  opacity: 0
}
.info-boxes span:after {
  right: initial;
  left: 50%;
}
.info-boxes:hover span:after,
.info-boxes:focus span:after,
.info-boxes:active span:after {
  left: calc(100% + 10px);
  opacity: 1;
}
.info-boxes:hover span:before,
.info-boxes:focus span:before,
.info-boxes:active span:before {
  right: calc(100% + 10px);
  opacity: 1;
}
<a href="#" class="info-boxes">
  <h5>2200AED</h5>
  <p>5 Private Sessions / Validity: 2 Months</p>
  <span>Online Booking</span>
</a>

Upvotes: 2

LarsW
LarsW

Reputation: 1588

It may be a thing that the a doesn't have a href. I don't know if that's in the original code as well, but it seems to solve the problem.

When I add your code, which apparently solves it, it doesn't work for me, so I think you added a href when you changed the HTML.

Upvotes: 0

Related Questions