Twitter Bootstrap Question posted in

How to change a:hover color from my social bar?-Twitter bootstrap

I have a social bar that has grey margin, I have been trying to make it (margin) red when user passes mouse over it.

Can anyone help me with this?
Even !important does not worked.

PS: I am using 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>
Tags:

5

Answers


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

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

    use id=subbtn in js where you want to hover and write this code in css or if you want to write in jsp put it under style,change the color name whatever you want ,I am 100% sure it will work fine

    Login or Signup to reply.
  2. 0

    added 

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

    in-place of 

    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>
    Login or Signup to reply.
  3. 0

    You have to use the a hyperlink inside the li and also add the parent class(footer li a:hover) to overwrite bootstrap default css. I hope this answer will be helpful.

      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>
    Login or Signup to reply.
  4. 0

    Changing the a:hover into a>li>i:hover would change on :hover of your social bar. Reason being the structure of your HTML code was a tag then li then i.

    I would say if you had a specific class for differentiating a>li>i of your social bar and other a>li>i if you do have one, you could add class to differentiate them. Example: a>li>i.social. Don’t forget if you do so add the social class into the 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>
    Login or Signup to reply.
  5. 0

    you can achieve this by adding parent element class with this, 

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

    Since the “fab” class background already set to gray color and you won’t get any changes for the a:hover color or background since the “.fab” class is inside the “a” tag

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search