html - 为什么使用列表时链接不重定向用户？

Question

嘿伙计们，我正在 css/html 中尝试一些动画。我很新，想知道为什么链接不起作用。动画效果很好，光标是指针，但是当按下链接时，即使它在锚标记中，它也不会带你到任何地方。我试着弄乱 z-index ，但我可以弄清楚任何事情。任何帮助将不胜感激。

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

标签： htmlcss

Answer 1

看起来你的锚标签在所有东西的后面，它需要是显示块才能看到它。

由于锚标记是一个内联元素，如果我给它们添加一个绿色边框，那么在添加显示块时你会得到这个：

所以现在你只需要添加height:100%它来覆盖元素。

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

但是，如果您将您的 li 样式移动到您的 a 标签，看起来大部分内容已由您处理。