PROSAGA码农传奇-html/HTML5-如何更改：我的社交栏中的悬停颜色？

0# 明天会更好 | 2019-08-31 10-32

1# 你瞎啊！撞我心了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    改变了
     <code>
      a:hover
    </code>
     成
     <code>
      a>li>i:hover
    </code>
     会改变
     <code>
      :hover
    </code>
     你的社交酒吧。原因是HTML代码的结构是
     <code>
      a
    </code>
     标签然后
     <code>
      li
    </code>
     然后
     <code>
      i
    </code>
    。
  </p>
  <P>
    如果你有一个特定的分类类，我会说
     <code>
      a>li>i
    </code>
     你的社交酒吧和其他
     <code>
      a>li>i
    </code>
     如果你有一个，你可以添加类来区分它们。例：
     <code>
      a>li>i.social
    </code>
    。不要忘记，如果你这样做添加
     <code>
      social
    </code>
     上课
     <code>
      i
    </code>
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“true”data-console =“true”data-babel =“false”>
    <div class =“snippet-code snippet-Currently-hidden”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          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;
    }
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <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>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>

2# Coolkid | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    添加
  </p>
   <pre>
    <code>
      a:hover li i {
    background-color: red;
    text-decoration: none;
}

</code>
  </pre>
  <P>
    原位的
  </p>
   <pre>
    <code>
      a:hover{
    background-color: red;
    text-decoration: none;
}

</code>
  </pre>
  <P>
    希望这可以帮助。谢谢

</p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          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;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <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>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    <EM>
      强调文字
    </EM>
  </p>
</DIV>

3# 张三岁 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    你必须使用里面的超链接
     <code>
      li
    </code>
     并添加父类
     <code>
      (footer li a:hover)
    </code>
     覆盖bootstrap默认的css。我希望这个答案会有所帮助。
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
            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;
  }
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <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>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>

4# afs-loliaholic | 2019-08-31 10-32