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

时间：2019-03-14 05:52:01

标签： html css hyperlink

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

有人可以帮我吗？ 甚至！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>

5 个答案:

答案 0 :(得分：1)

已添加

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>

强调文字

答案 1 :(得分：0)

#subbtn{
background-color:transparent;
border-width:0;
cursor:pointer;
color:grey;
text-decoration: none;
}

#subbtn:hover{
    cursor: pointer;
    color:red;
}

在要悬停并在css中编写此代码的js中使用id = subbtn，或者如果要在jsp中编写此样式，请根据需要更改颜色名称，我100％确信它将正常工作

答案 2 :(得分：0)

您必须使用li内的超链接，还必须添加父类(footer li a:hover)来覆盖引导程序的默认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>

答案 3 :(得分：0)

将a:hover更改为a>li>i:hover会在社交栏的:hover上发生变化。原因是HTML代码的结构是a标签，然后是li，然后是i。

我想说的是，如果您有一个用于区分a>li>i的社交酒吧的特定班级，而另外一个a>li>i（如果您有）可以区分您的社交酒吧，则可以添加类别来区分它们。示例：a>li>i.social。不要忘记是否将social类添加到i 

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>li>i: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>

答案 4 :(得分：0)

您可以通过为此添加父元素类来实现这一点，

.list-inline-item .fab:hover {
 background: red;
}

由于“ fab”类的背景已经设置为灰色，并且由于“ .fab”类位于“ a”标记内，因此您不会对a：hover颜色或背景进行任何更改

相关问题
最新问题