Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal tudo bem ?
Gostaria de adicionar uma borda a um objeto passando o mouse em cima do mesmo usando o parâmetro hover sem que alterasse a posição dos outros ao lado ( sem ficar tremendo o layout)
abaixo está o código. Alguém consegue me dar uma ajuda ?
<html>
<head>
<title></title>
<style type="text/css">
.quadrado{
width: 100px;
height: 100px;
background-color: grey;
display: inline-block;
margin:2px;
}
#container{
width: 320px;
}
.quadrado:hover{
border: 4px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container">
<div class="quadrado">Primeiro</div>
<div class="quadrado">Segundo </div>
<div class="quadrado">Terceiro </div>
<div class="quadrado">Quarto</div>
<div class="quadrado">Quinto</div>
<div class="quadrado">Sexto</div>
<div class="quadrado">Sétimo</div>
<div class="quadrado">Oitavo</div>
<div class="quadrado">Nono</div>
</div>
</body>
</html>>
3 minutos atrás, Omar~ disse:
Na verdade para fazer isso nada mais é que mudar a borda de cor.
O elemento .quadrado mesmo sem efeito hover ele já possui a borda de 4px da mesma cor que o plano de fundo ou transparente. Então ao entrar sobre evento hover é só trocar a borda.
.quadrado {
border: 4px solid #fff
}Obs.: Você pode somente trocar a cor sem reprojetar a borda se assim desejar.
Isso.
Só completando: retira o box-sizing do hover e coloca na classe .quadrado
Pessoal muito obrigado. Realmente era isso mesmo, muito simples a solução, porem fiquei pensando em coisas mais complexas até adicionei overflow, mas ainda não tinha me dado o resultado desejado.
Agradeço pela ajuda pois com vocês cheguei no resultado esperado. Obrigado !!!
Na verdade para fazer isso nada mais é que mudar a borda de cor.
O elemento .quadrado mesmo sem efeito hover ele já possui a borda de 4px da mesma cor que o plano de fundo ou transparente. Então ao entrar sobre evento hover é só trocar a borda.
.quadrado:hover { border: 4px solid #000 }Obs.: Você pode somente trocar a cor sem reprojetar a borda se assim desejar.