CODEWITHSUNDEEP
htmlcss
stewieranger124
stewieranger124

Reputation: 25

Why do the links not redirect user when using list?

Hey guys I am experimenting with some animation in css/html. I am fairly new and would like to know why the links don't work. The animation works fine and the cursor is pointer but when pressed the link does not take you anywhere even though its in the anchor tag. I tried messing around with z-index but I could figure out anything. Any help will be appreciated.

.social-media-list {
  position: relative;
  font-size: 1.5rem;
  text-align: center;
  width: 100%;
}

.social-media-list li a {
  color: #fff;
}

.social-media-list li {
  position: relative;
  top: 0;
  left: -20px;
  display: inline-block;
  height: 70px;
  width: 70px;
  margin: 10px auto;
  line-height: 70px;
  border-radius: 50%;
  color: #fff;
  background-color: rgb(27, 27, 27);
  cursor: pointer;
  transition: all .2s ease-in-out;
}

.social-media-list li:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 0 1px #fff;
  transition: all .2s ease-in-out;
}

.social-media-list li:hover {
  background-color: #fff;
}

.social-media-list li:hover:after {
  opacity: 1;
  transform: scale(1.12);
  transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
}

.social-media-list li:hover a {
  color: #111;
}
<div class="middle">
  <ul class="social-media-list">
    <li>
      <a href="https://www.facebook.com" target="_blank" class="contact-icon">
        <i class="fa fa-facebook-square"></i></a>
    </li>
    <li>
      <a href="https://www.instagram.com" target="_blank" class="contact-icon">
        <i class="fa fa-instagram"></i></a>
    </li>
  </ul>
</div>

Upvotes: 0

Views: 45

Answers (2)

johannchopin
johannchopin

Reputation: 14873

There are multiple stuffs that you can improve in you code. First, why use an absolute ::after ? You can directly style the li:

.social-media-list li {
  position: relative;
  top: 0;
  left: -20px;
  display: inline-block;
  margin: 10px auto;
  color: #fff;
  background-color: rgb(27, 27, 27);
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #fff;
  cursor: pointer;
  transition: all .2s ease-in-out;
}

Then you just need to be sure that the link take all the space:

.social-media-list li a {
  display: flex;
  justify-content: center;
  color: #fff;
  width: 100%;
  height: 100%;
}

And here you go:

.social-media-list {
  position: relative;
  font-size: 1.5rem;
  text-align: center;
  width: 100%;
}

.social-media-list li a {
  display: flex;
  justify-content: center;
  color: #fff;
  width: 100%;
  height: 100%;
}

.social-media-list li {
  position: relative;
  top: 0;
  left: -20px;
  display: inline-block;
  margin: 10px auto;
  color: #fff;
  background-color: rgb(27, 27, 27);
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #fff;
  cursor: pointer;
  transition: all .2s ease-in-out;
}

.social-media-list li:hover {
  background-color: #fff;
}

.social-media-list li:hover a {
  color: #111;
}
<div class="middle">
  <ul class="social-media-list">
    <li>
      <a href="https://www.facebook.com" target="_blank" class="contact-icon">
        link
      </a>
    </li>
    <li>
      <a href="https://www.instagram.com" target="_blank" class="contact-icon">
        link
      </a>
    </li>
  </ul>
</div>

Upvotes: 1

Andrew1996
Andrew1996

Reputation: 436

Looks like your anchor tag is behind everything, and it needs to be display block to be able to see it.

As the anchor tag is an inline element if I add a green border to them you get this when adding display block:

enter image description here

So now you need to just add height:100% for it to cover the element.

.social-media-list li a {
  color: #fff;
  display:block; // NEW
  height:100%; // NEW
  z-index:500; // NEW
  position: relative; // NEW
}

However if you move your li styles to your a tag it looks like most of this is handled already by you.

Upvotes: 1

Related Questions