0

Estou fazendo uma espécie de botão card dentro de uma tag para criar um link (bootstrap 4 beta). No card existe uma classe que altera seu background-color para um azul claro. Quero que esse card fique azul escuro ao colocar o mouse encima, mas não consigo pois tem o link externo. Como eu faço a condição que, ao dar hover no link ele altera o background do card que está dentro? Segue o codigo:

<a class="link-dashboard" routerLink="#">
        <div class="card menu-dashboard text-white bg-azul-claro">
            <div class="card-body pb-0">
                <i class="fa fa-newspaper-o float-right fa-5x" aria-hidden="true"></i>
                <h5 class="mb-0">NOVA POSTAGEM</h5>
                <p>Publique uma notícia!</p>
            </div>
        </div>
    </a>


a.link-dashboard{
    text-decoration: none;
}

.bg-azul-claro{
    background-color: #87CEFA;
}

.bg-azul-claro:hover{
    background-color: rgba(36, 161, 238, 0.53);
}
1
  • HEX e RGBA estão praticamente iguais por isso não percebes a diferença no hover 28/08/2017 às 20:22

3 Respostas 3

1

Altere o alpha do background de 0.53 para 1:

background-color:rgba(36, 161, 238, 1);
0

O azul escuro vai interferir na legibilidade do texto, portanto é boa pratica mudar a cor do texto no hover

a.link-dashboard{
    text-decoration: none;
}

.bg-azul-claro{
    background-color: #87CEFA;
}

.bg-azul-claro:hover{
    background-color: rgba(0, 0, 255, 1);
    color:#ffffff;
}
<a class="link-dashboard" routerLink="#">
        <div class="card menu-dashboard text-white bg-azul-claro">
            <div class="card-body pb-0">
                <i class="fa fa-newspaper-o float-right fa-5x" aria-hidden="true"></i>
                <h5 class="mb-0">NOVA POSTAGEM</h5>
                <p>Publique uma notícia!</p>
            </div>
        </div>
    </a>

0

Utilizaria o RGB ao invés de RGBA (pois no exemplo você não precisa do Alpha)

background-color: rgb(0, 0, 255);

--

Utilizaria uma transição para que o efeito fique mais suave: exemplo

transition: background-color 0.5s ease;

a.link-dashboard{
    text-decoration: none;
}

.bg-azul-claro{
    transition: background-color 0.5s ease;
    background-color: #87CEFA;
}

.bg-azul-claro:hover{
    background-color: rgb(0, 0, 255);
    color:#ffffff;
}
<a class="link-dashboard" routerLink="#">
        <div class="card menu-dashboard text-white bg-azul-claro">
            <div class="card-body pb-0">
                <i class="fa fa-newspaper-o float-right fa-5x" aria-hidden="true"></i>
                <h5 class="mb-0">NOVA POSTAGEM</h5>
                <p>Publique uma notícia!</p>
            </div>
        </div>
    </a>

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 .