将图标链接悬停在列表中时出现问题

Question

第一次在这里发布问题，希望有人能帮忙！我想创建一个社交媒体图标/链接列表

    <div class="social-links">
    <ul>
      <li class="m-link">
        <a href=""><i class="far fa-envelope"></i></a>
      </li>
      <li class="m-link">
        <a href=""><i class="fab fa-linkedin-in"></i></a>
      </li>
      <li class="m-link">
        <a href=""><i class="far fa-address-card"></i></a>
      </li>
    </ul>
  </div>

  .m-link {
  width: 2em;
  height: 2em;
  text-align: center;
  list-style: none;
  margin: 10px 30px;
  display: inline-block;
  font-size: 2.5em;
  line-height: 2em;
  color: #e2e2e2;
  border: 1px solid #e2e2e2;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.5s;
}
.m-link:hover {
  background-color: #e2e2e2;
  color: #0b0a08;
  box-shadow: 0 0 15px #9ecaed;
}
.m-link a {
  text-decoration: none;
  color: #e2e2e2;
}

我的问题是，通过这种方式，悬停颜色不适用于图标/链接，我试图为"添加一个额外的悬停；。m链路a"；像这样…

.m-link a:hover {
  color: #0b0a08;
}

但以这种方式，颜色仅在我的光标位于链接上时应用，而不是在我悬停在列表元素上时应用。这里还是个初学者，请有人帮忙！！

Answer 1

您需要在悬停时瞄准元素内部的元素，就像这个

.m-link:hover a > i { /* 'on hover on .m-link class element, then i inside a will take this css code */
  background-color: #e2e2e2;
  color: #0b0a08;
  box-shadow: 0 0 15px #9ecaed;
}

 .m-link {
  width: 2em;
  height: 2em;
  text-align: center;
  list-style: none;
  margin: 10px 30px;
  display: inline-block;
  font-size: 2.5em;
  line-height: 2em;
  color: #e2e2e2;
  border: 1px solid #e2e2e2;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.5s;
}
.m-link:hover a > i {
  background-color: #e2e2e2;
  color: #0b0a08;
  box-shadow: 0 0 15px #9ecaed;
}
.m-link a {
  text-decoration: none;
  color: #e2e2e2;
}

<script src="https://kit.fontawesome.com/9114d9acc8.js" crossorigin="anonymous"></script>
<div class="social-links">
    <ul>
      <li class="m-link">
        <a href=""><i class="far fa-envelope"></i></a>
      </li>
      <li class="m-link">
        <a href=""><i class="fab fa-linkedin-in"></i></a>
      </li>
      <li class="m-link">
        <a href=""><i class="far fa-address-card"></i></a>
      </li>
    </ul>
  </div>