1

Estou desenvolvendo uma aplicação web e gostaria que ao passar o mouse os icons mudasse de cor e não mostrar aquela linha embaixo dos icons mas o houver não funciona.

HTML

  <div class="header-fixed">
<div class="container">
    <div class="row">
        <div class="col-xs-4 col-sm-4 text-left">
            <div class="icons_moveis"><a class="fa fa-home"></a></div>
        </div>
        <div class="col-xs-4 col-sm-4 text-center">
            <div class="icons_moveis"><a class="fa fa-user"></a></div>
        </div>
        <div class="col-xs-4 col-sm-4 text-right">
           <div class="icons_moveis"><a class="fa fa-shopping-cart"></a></div>
        </div>
    </div>
</div>

CSS

.icons_moveis:hover{

  color: yellow;
 }

Pagina com os icons em que ao passar o mouse os icons era pra ficar amarelo.

inserir a descrição da imagem aqui

4
  • É possível que seja sobreposição de estilos. Já tentou com color: yellow !important; ? E o hover era suposto ser para o <div> que é o que está, ou para o <a> ?
    – Isac
    15/10/2017 às 23:58
  • suposto ser para o <div> que é o que está, ou para o <a> não entendi ?
    – User1999
    16/10/2017 às 0:08
  • coloquei color: yellow !important; e não funcionou
    – User1999
    16/10/2017 às 0:09
  • Está a aplicar cor de texto no <div> mas os <a> provavelmente já tem uma cor definida no estilo. Logo provavelmente o que quer fazer é .icons_moveis a:hover {. Mas já depende um pouco de como tem os seus estilos.
    – Isac
    16/10/2017 às 0:11

1 Resposta 1

3

Você deve setar a cor amarela para o elemento filho (que no seu caso é o elemento a), dentro da div com a classe icons_moveis.

.icons_moveis a:hover{
  color: yellow;
  text-decoration: none;
 }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
 <div class="header-fixed">
<div class="container">
    <div class="row">
        <div class="col-xs-4 col-sm-4 text-left">
            <div class="icons_moveis"><a class="fa fa-home"></a></div>
        </div>
        <div class="col-xs-4 col-sm-4 text-center">
            <div class="icons_moveis"><a class="fa fa-user"></a></div>
        </div>
        <div class="col-xs-4 col-sm-4 text-right">
           <div class="icons_moveis"><a class="fa fa-shopping-cart"></a></div>
        </div>
    </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .