Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia!
Estava criando um menu rapido aqui para fazer uns teste..
Eai quando eu adicionei um border-top de 4px ao passar o mouse em cima, o mesmo da uma deslocada para baixo acredito eu de 4px, como faço para que isso não aconteça?
Segue o código:
Agradeço desde já a ajuda,
Abcs
Carlos Henrique.
Bom dia Carlos!
O border tem por padrão adicionar uma soma ao seu width ou height. Para fazer esse mesmo efeito, tente utilizar as pseudo-classes ::after ou ::before.
Veja um exemplo:
.menu::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: orange;
display: none;
/* ou */
opacity: 0;
}.menu:hover::before {
display: block;
/* ou */
opacity: 1;
}Como o position é absolute, ele tende a não somar os valores de height de ambos elementos.
Abraços!
Obrigado galera! deu certo das duas formas..
Beleza! :P
Olá.
Você pode fazer assim:
header #menu li{
/ deixa sempre com 4px, mas transparente para não ficar visível /
header:hover #menu li:hover {
/ aí você só muda a cor /
#menu li a {
/ e desconta os 4px da borda para ficar centralizado /