Adicionar borda ao objeto sem mover o objeto ao lado
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>Discussão (3)
Carregando comentários...