Change the Background-color of a div within a link

Asked

Viewed 791 times

0

I’m making a sort of card button inside a tag to create a link (bootstrap 4 beta). On the card there is a class that changes its background-color to a light blue. I want this card to turn dark blue when I put the mouse up, but I can’t because it has the external link. How do I make the condition that by giving Hover on the link it changes the background of the card that is inside? Follow the code:

<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);
}
html css bootstrap background-color

  • HEX and RGBA are practically the same so you don’t understand the difference in hover

3 answers

1


Change the alpha of background from 0.53 to 1:

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

0

The dark blue will interfere with the readability of the text, so it is good practice to change the color of the text in the 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

Would use the RGB instead of RGBA (because in the example you don’t need the Alpha)

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

--

Would use a transition so the effect is softer: example

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>

Browser other questions tagged html css bootstrap background-color

You are not signed in. Login or sign up in order to post.