Как изменить цвет: hover из моей социальной панели? - PullRequest
Новая
       15

Как изменить цвет: hover из моей социальной панели?

0 голосов
/ 14 марта 2019

У меня есть социальная панель с серым полем, я пытаюсь сделать ее (поле) красным, когда пользователь наводит на нее мышь.

Может кто-нибудь помочь мне с этим?Даже! Важный не работает.

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 ]

1 голос
/ 14 марта 2019

добавлено 

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>

выделенный текст

0 голосов
/ 14 марта 2019

Вы можете достичь этого, добавив класс родительского элемента с этим, 

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

Так как фон класса "fab" уже настроен на серый цвет, и вы не получите никаких изменений для цвета или фона a: hover, поскольку класс ".fab" находится внутри тега "a"

0 голосов
/ 14 марта 2019

Изменение 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>
0 голосов
/ 14 марта 2019

Вы должны использовать гиперссылку внутри 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>
0 голосов
/ 14 марта 2019 
#subbtn{
background-color:transparent;
border-width:0;
cursor:pointer;
color:grey;
text-decoration: none;
}

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

используйте id = subbtn в js, где вы хотите навести курсор и написать этот код в css, или если вы хотите написать в jsp, поместите его под стиль, измените имя цвета на то, что вы хотите, я уверен на 100%будет работать нормально

...