Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

xDenisX

Adicionar borda ao objeto sem mover o objeto ao lado

Por , em Desenvolvimento frontend

Recommended Posts

xDenisX    0

xDenisX
Postado

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>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Omar~    87

Omar~
Postado

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
}
.quadrado:hover {
    border: 4px solid #000
}

Obs.: Você pode somente trocar a cor sem reprojetar a borda se assim desejar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado
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
}
.quadrado:hover {
    border: 4px solid #000
}

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

xDenisX    0

xDenisX
Postado

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 !!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • andre2654
      Animação de meleca abrir ao clicar
      Por andre2654
      Bom dia, peço humildemente a ajuda de vocês,
      Enfim, estou fazendo um exemplo de site, só para teste mesmo, onde terá uma janela principal perguntando em qual site a pessoa quer ir(1 só empresa, porém dois negócios) ai se a pessoa clicar em alguma das melecas, quero que ela abra mostrando o site, ou só uma imagem mesmo

    • petrochinski
      Hover -> Dropdown é possível ?
      Por petrochinski
      Eu tive uma ideia muito boa, mas não consegui fazer ainda.
       
      A ideia é simples, eu tenho um botão escrito 'Contato', quando passar o mouse gostaria que ele "abrisse" uma div logo abaixo (dropdown), como por exemplo aparecer o telefone somente se passar o mouse.
       
      Não achei nenhum tópico com essa ideia... é que gostaria de fazer sem utilizar nav, pois nav é o menu, e a ideia inicial é de fato ser um botão que aparece as informações quando se passa o mouse.
       
      Grato :)
    • AsxCle
      Hover
      Por AsxCle
      Olá pessoal
       
      Estou com problema ao utilizar o hover, criei um botão que tem uma imagem como background, queria que toda vez que eu passar o mouse, o botão ficaria escuro, ou seja, diminuiria a transparência do mesmo. Já tentei colocar um segundo background com opacidade de 0, e quando passasse o mouse, opacidade ficaria 1, mas não deu certo. Poderiam me ajudar?
       
      HTML
       
      <!DOCTYPE html>
      <html lang="pt-br" dir="ltr">
        <head>
          <meta charset="utf-8">
          <title>--.--</title>
          <link rel="stylesheet" type="text/css" href="--..--.css">
          <!--<link href="css/hover.css" rel="stylesheet" media="all">-->
        </head>
        <body>
          <h1 id="pcp"> 選べ </h1>
          <button class="first">
          </button>

        </body>
      </html>
       
      CSS 
       
      .first {
          background-image: url(001-T.png);
        }
       
      Tudo que eu tentei não deu certo, já criei até um subclass com :before, mas em vão, então só restou isso do css, pois é o background.
    • Gabriel Barros Santana
      Menu Hover em CSS e HTML
      Por Gabriel Barros Santana
      Oi, estou com uma duvida. Estava criando um meno de categorias para um site e-commerce na tray.
      Porém estou lutando para editar na plataforma da tray. Tenho um menu horizontal com os subníveis vertical porém queria editar para alterar o estilo e conteúdo mas a tray ta sendo bem estranha para mim alguma ajuda ? 
       
      Queria mudar desse menu hover normal de lista do site "JP" pra esse mais dinâmico com um caixa maior e com foto de produtos como exemplo do site "casas bahia".
       


    • Clovis Alberto Block
      Hover com tamanhos diferentes no menu principal e submenus
      Por Clovis Alberto Block
      Olá amigos,
       
      Baixei o código de um "mega menu" e passei a adapta-lo às minhas necessidades. O problema que não consigo resolver é acertar os tamanhos do hover, nos menus secundários está ok, porem no menu principal o hover está maior do que cada item de menu, executando o código é fácil perceber, basta navegar no menu principal que o problema já é percebido. Tenho a impressão que o menu principal "herdou" dos menus secundários o tamanho do hover. Gostaria de deixar o tamanho do hover no menu principal proporcional ao comprimento de cada texto. Estou anexando os arquivos, inclusive nos mesmos deixei minhas tentativas de acerto em forma de comentários. Sou novo em HTML/CSS, então se virem código ruim, fiquem à vontade para opinar. Por favor, expliquem como se eu tivesse 08 anos rsrsrsr...
       
      P.S: Como faço para anexar meus arquivos fonte html e css3?
       
      Desde já agradeço.
       
      Clovis Alberto Block
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito