html - 如何更改 :hover color from my social bar?

Question

我有一个带有灰色边距的社交栏，当用户将鼠标移到它上面时，我一直试图让它(边距)变成红色。

谁能帮我解决这个问题？即使 !important 也不起作用。

PS:我用的是bootstrap

    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>

Answer 1

您必须在 li 中使用超链接并添加父类(footer li a:hover) 以覆盖 Bootstrap 默认 css。我希望这个答案会有所帮助。

  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;
  }
  
  footer li a:link {
      color: white;
  }
  
  footer li 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 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<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>
                        <li class="list-inline-item mx-2"><a href="http://www.pinterest.com"><i class="fab fa-pinterest-p"></i></a></li>
                        <li class="list-inline-item mx-2"><a href="http://www.facebook.com"><i class="fab fa-facebook-f"></i></a></li>
                        <li class="list-inline-item mx-2"><a href="http://www.linkedin.com"><i class="fab fa-linkedin-in"></i></a></li>
                        <li class="list-inline-item mx-2"><a href="http://www.blog.com"><i class="fab fa-blogger-b"></i></a></li>
                        <li class="list-inline-item mx-2"><a href="http://www.twitter.com"><i class="fab fa-twitter"></i></a></li>
                        <li class="list-inline-item mx-2"><a href="http://www.youtube.com"><i class="fab fa-youtube"></i></a></li>
                    </ul>
                    <p class="copyright">Copyright © 2013 WEUSTHEM INC. ALL RIGHTS RESERVED.</p>
                </div>
            </div>
        </div>
    </div>
</footer>