Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como utilizar hover simultaneamente em divs pai e filho?

Possuo duas divs, a 'botao' e dentro dela a 'saibaMais' com o texto, apliquei scale e transition na div 'botao' utilizando o hover, mas preciso que a div 'saibaMais' mude a cor para branco ao mesmo tempo em que o hover for acionado na 'botao' , porém isso não está acontecendo, como resolver?

Só coloquei o texto em uma div porque não estava conseguindo posicionar corretamente e usar o padding fazia com que o tamanho da div fosse alterado, existe uma forma mais eficaz que usar div para o texto?

<a href="#">
        <div class="botao">
            <div class="saibaMais">Saiba mais</div>
        </div>
    </a>
.botao{
width:100px;
height: 40px;
border: solid 1px #f1c40f;
background-color: #fff;
position: absolute;
top:40%;
right:40%;
margin-top: -30px;
margin-right:-50px;
border-radius:6px;
box-sizing: border-box;

}

.botao:hover{
width:100px;
height: 40px;
background-color: #f39c12;
color: #fff;
border-radius:6px;
box-sizing: border-box;
transform: scale(1.2);
transition:0.3s;
}

.saibaMais{
color: #000;
position: absolute;
top:16%;
right:12%;
font-size: 1.1em;
font-family: 'Oswald', sans-serif;
font-weight: 400;
}
1 resposta
solução!

Oi Misael, tudo certo?

O usuário vai passar o mouse no primeiramente no button, certo? Então já sabemos que tem que colocar um .button:hover.

Mas você precisa que o .saibaMais fique com a cor branca. E o .saibaMais está dentro de quem? Do .button!

Então dá para fazer assim:

.botao:hover .saibaMais {
  color: white;
}

Com relação a sua outra dúvida, eu faria desta maneira, só com o elemento <button>, a fim de deixar o HTML mais semântico e mais limpinho.

Espero ter ajudado,

Abcs!