html - 如何在里面添加链接让李和李悬停？

Question

当我添加这样的链接时：

<li><a href="link"><i class="fab fa-youtube-square"></i></a></li>

它添加了一个链接，但它会自动显示一个紫罗兰色的图标......所以它甚至都不显示li，li:hover 我也不想在<a href>里面有一个链接（）li并且仍然可以制作li和li:hover工作。

我的 html 中有这个。图标来自fontawesome-free@5.15.3/css/fontawesome.min.css（外部站点 css 链接）

这里的第一个图标带有链接，第二个li:hover，第三个 -li

li {
  list-style: none;
  margin: 10px 30px;
  display: inline-block;
  font-size: 40px;
  padding: 20px 20px;
  color: rgb(255, 255, 255);
  border-radius: 20%;
  transition: .5s;
  animation-name: fadeIn;
  animation-duration: 15s;
}

li:hover {
  color: #cf0c57;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css">

<nav class="container-social item">
  <ul>
    <li><i class="fab fa-youtube-square"></i></li>
    <li><i class="fab fa-soundcloud"></i></li>
    <li><i class="fab fa-instagram-square"></i></li>
    <li><i class="fab fa-facebook-square"></i></li>
    <li><i class="fab fa-twitter-square"></i></li>
  </ul>
</nav>

标签： htmlcss