Ao utilizar o hover sobre os links, ele dá uma "tremidinha"(no próprio gif de exemplo do professor acontece) na imagem quando é utilizado um tamanho de borda ou padding maior do que os botões anteriores. Como arrumar?
Ao utilizar o hover sobre os links, ele dá uma "tremidinha"(no próprio gif de exemplo do professor acontece) na imagem quando é utilizado um tamanho de borda ou padding maior do que os botões anteriores. Como arrumar?
Oii, como vai? Espero que esteja bem!
Isso geralmente acontece porque o "hover" está alterando o layout da página, fazendo com que os elementos ao redor se ajustem para acomodar o novo tamanho.
Uma maneira de resolver isso é usando a propriedade "box-sizing" com o valor "border-box". Isso fará com que qualquer padding ou borda que você adicione seja incluído no tamanho total do elemento, em vez de adicionado a ele. Aqui está um exemplo de como você pode fazer isso:
div {
box-sizing: border-box;
}
div:hover {
border: 10px solid black;
}
Neste exemplo, quando você passa o mouse sobre a div, uma borda de 10px aparece. No entanto, devido ao "box-sizing: border-box;", o tamanho total da div (incluindo a borda) permanece o mesmo, então não há "tremida".
Espero que isso resolva o seu problema! Lembre-se, a melhor maneira de aprender é experimentando, então sinta-se à vontade para brincar com o código e ver o que acontece.
Espero ter ajudado e bons estudos!