javascript - 页脚中的一个 <A> 元素不响应悬停或点击

Question

页脚内的辅助导航菜单中的三个元素中，有一个元素不会响应。当我将鼠标悬停在顶部和底部链接上时，它们都可以工作，但由于某种原因，中间似乎没有检测到我将鼠标悬停在该选项上。

页脚和菜单元素的 HTML:

<footer>
  <ul class="social">
    <li class="social"> <a href="https://www.facebook.com/Aki-Weininger-104277784411418/" id="profile-link"
        target="https://www.facebook.com/Aki-Weininger-104277784411418/"> <i class="fab fa-facebook-f"> </i> </a>
    </li>
    <li class="social"> <a href="https://www.instagram.com/akiweininger/?hl=en" id="instagram-link"
        target="https://www.instagram.com/akiweininger/?hl=en"> <i class="fab fa-instagram"> </i> </a> </li>
    <li class="social"> <a href="https://www.behance.net/akiweininger" id="Behance-link" target="https://www.behance.net/akiweininger">
        <i class="fab fa-behance"></i> </a> </li>
    <li class="social"> <a href="https://www.upwork.com/freelancers/~01d4ae188cd67db90c" id="Upwork-link"
        target="https://www.upwork.com/freelancers/~01d4ae188cd67db90c">
        <img class="upwork" src="https://i.imgur.com/Z02P8YO.png" alt="upwork">
      </a> </li>
  </ul> 
  <div class="navi-title">
  Navigation
  </div>
  <ul class="navi">  <li class="navi">
        <a href="PLACEHOLDER">
          Home
        </a>
      </li>
     <li class="navi">
        <a href="PLACEHOLDER">
          Works
        </a>
      </li>
     <li class="navi">
        <a href="PLACEHOLDER">
          Contact
        </a>
      </li>
  </ul> 
</footer>

页脚和菜单元素的 CSS:

footer {
  clear: both;
  background-color: #2a7de1;
  text-align: center;
  padding: 2% 0% 1% 0%;
  margin-top: 20%;
  position: relative;
}
footer ul.social li.social {
  list-style: none;
  display: inline;
}
footer > ul.social li.social a {
  text-align: center;
  font-size: 2vw;
  margin: 0% 3% 0% 3%;
  overflow: hidden;
  text-decoration: none;
}
footer > ul.social li.social a .fab {
  color: white;
}
footer > ul.social li.social a:hover .fab {
  transform: scale(1.3);
  transition: 0.3s;
}
.upwork {
  width: 2.2%;
}
.upwork:hover {
  transform: scale(1.3);
  transition: 0.3s;
}
footer > ul.navi li.navi {
  list-style: none;
  margin: 0% 0% 0% 75%; 
  text-align: left;
  padding: 0.3%;
}
.navi-title {
  color: white;
  font-family: 'karla';
  font-size: 1.4vw;
  text-align:left; 
    margin: 0% 0% 0.5% 75%; 
  font-weight: 700;
}
footer > ul.navi li.navi a {
   text-decoration: none;
  color: white;
    font-family: 'karla';
  font-size: 1.2vw;
}
ul.social {
  position: absolute;
  margin-top: 3.8%;
}
footer > ul.navi li.navi a:hover {
text-decoration: underline;
}

Codepen

Answer 1

下面的元素选择器位于链接的顶部。如果添加 width:600px;对于下面的元素选择器，链接的悬停有效。当然，这样看起来不太好，但这是一个开始。

ul.social {
width: 600px;
position: absolute;
margin-top: 3.8%;
}