html - 如何从社交栏中更改悬停颜色？

我有一个带有灰色边距的社交栏，当用户将鼠标移到上方时，我一直试图使其变为红色。

谁能帮我这个？
即使！important也不起作用。

PS：我正在使用引导程序

    footer {
        background-color: black;
    }
    .foot {
        font-family: 'Josefin Sans', sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size: 21px;
        line-height: 36px;
        color: #e0e1d7;
    }
    a:link {
        color: white;
    }

    a:hover {
        color: red;
        text-decoration: none;
    }

    .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }

    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .copyright {
        font-family: Arial;
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        line-height: 18px;
        color: #4b4b4b;
    }

    .list-inline-item {
        color: white;
    }

    .fab {
        background-color: grey;
        padding: 4px 5px;
    }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<footer>
      <div class="container-fluid text-center text-white">
        <div class="row">
          <div class="col-sm-12">
            <img src="../../assets/footer.png" alt="black tint">
            <div class="foot pt-5 pb-2">
                <ul>
                  <a href="http://www.pinterest.com"><li class="list-inline-item mx-2"><i class="fab fa-pinterest-p"></i></li></a>
                  <a href="http://www.facebook.com"><li class="list-inline-item mx-2"><i class="fab fa-facebook-f"></i></li></a>
                  <a href="http://www.linkedin.com"><li class="list-inline-item mx-2"><i class="fab fa-linkedin-in"></i></li></a>
                  <a href="http://www.blog.com"><li class="list-inline-item mx-2"><i class="fab fa-blogger-b"></i></li></a>
                  <a href="http://www.twitter.com"><li class="list-inline-item mx-2"><i class="fab fa-twitter"></i></li></a>
                  <a href="http://www.youtube.com"><li class="list-inline-item mx-2"><i class="fab fa-youtube"></i></li></a>
                </ul>
                <p class="copyright">Copyright © 2013 WEUSTHEM INC. ALL RIGHTS RESERVED.</p>
            </div>
          </div>
        </div>
      </div>
    </footer>

最佳答案

添加

a:hover li i {
    background-color: red;
    text-decoration: none;
}

就地

a:hover{
    background-color: red;
    text-decoration: none;
}

希望这可以帮助。谢谢

footer {
    background-color: black;
}
.foot {
    font-family: 'Josefin Sans', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 21px;
    line-height: 36px;
    color: #e0e1d7;
}
a:link {
    color: white;
}

a:hover li i {
    background-color: red;
    text-decoration: none;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.copyright {
    font-family: Arial;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    color: #4b4b4b;
}

.list-inline-item {
    color: white;
}

.fab {
    background-color: grey;
    padding: 4px 5px;
}

<footer>
  <div class="container-fluid text-center text-white">
    <div class="row">
      <div class="col-sm-12">
        <img src="../../assets/footer.png" alt="black tint">
        <div class="foot pt-5 pb-2">
            <ul>
              <a href="http://www.pinterest.com"><li class="list-inline-item mx-2"><i class="fab fa-pinterest-p"></i></li></a>
              <a href="http://www.facebook.com"><li class="list-inline-item mx-2"><i class="fab fa-facebook-f"></i></li></a>
              <a href="http://www.linkedin.com"><li class="list-inline-item mx-2"><i class="fab fa-linkedin-in"></i></li></a>
              <a href="http://www.blog.com"><li class="list-inline-item mx-2"><i class="fab fa-blogger-b"></i></li></a>
              <a href="http://www.twitter.com"><li class="list-inline-item mx-2"><i class="fab fa-twitter"></i></li></a>
              <a href="http://www.youtube.com"><li class="list-inline-item mx-2"><i class="fab fa-youtube"></i></li></a>
            </ul>
            <p class="copyright">Copyright © 2013 WEUSTHEM INC. ALL RIGHTS RESERVED.</p>
        </div>
      </div>
    </div>
  </div>
</footer>

强调文字

关于html - 如何从社交栏中更改悬停颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55155776/