Change the background-color of a div within a link

Navigation
0

I am making a kind of button card inside a tag to create a link (bootstrap 4 beta). In the card there is a class that changes its background-color to a light blue. I want this card to turn dark blue by putting the mouse on it, but I can not because it has the external link. How do I make the condition that by hovering 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);
}
    
asked by anonymous 28.08.2017 / 22:05

3 answers

1

Change the alpha of background from 0.53 to 1: 

background-color:rgba(36, 161, 238, 1);
    
28.08.2017 / 22:19
0

Dark blue will interfere with the readability of the text, so it is a good practice to change the color of the hover text 

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>
    
28.08.2017 / 22:42
0

You would use RGB instead of RGBA (because in the example you do not need Alpha) 

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

-

You'd use a transition to make the effect smoother: 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>
    
28.08.2017 / 22:53
How to make a date in ISO 8601 format but be in the same a DateTime [closed] How to know the size of JFrame in the constructor of the same?