a:hover empurra elemento que vem abaixo

[Thiago Nunes 0]

Olá pessoal,

Estou tendo o seguinte problema com os botões acima, quando passo o mouse sobre eles, o conteúdo inferior é empurrado para baixo. O código pode ser visualizado nesse link: http://jsfiddle.net/thiagonunes/n4FpG/2/

Alguém sabe como posso resolver essa questão?

Obrigado!

[Diéssica 140]

Não entendi muito bem a sua dúvida, mas pelo o que eu entendi é por causa do margin-top aplicado no :hover. Removendo-o ou mantendo o valor, fica ok. :)

:seta: http://jsfiddle.net/n4FpG/3/

[Thiago Nunes 0]

Olá Diéssica,

 

Acontece o seguinte, o que eu quero é criar um efeito como se o botão fosse pressionado. Anteriormente consegui facilmente, mas com imagens, preenchendo o espaço correspondente a "descida" do botão com a cor do background. Porém, agora estou utilizando CSS3. Segue uma imagem para melhor compreensão:

As áreas correspondentes as cores #21CDB3 e #26E2C6 devem ter 41px em todos os estados dos botões, já as sombras, onde foi usada a propriedade box-shadow, tem os seguintes valores: 4px no estado normal, 2px no hover e 2px no topo no estado active.

Tirando o margin-top do hover funciona, mas acaba perdendo o efeito "pressionado". Aproveito para tirar outra dúvida: Pra conseguir deixar o botão no estado active com 41px, precisei setar uma altura de 43px, só não entendi porquê, já que no hover a altura foi herdada sem problemas.

 

Precisei fazer alguns pequenos ajustes nos valores dos botões e estou postando novamente o código pra ver se você ou outra pessoa pode ajudar: http://jsfiddle.net/thiagonunes/5v6Ub/1/

Thanks again! ;)

[Felipe Espinosa Fernandes 0]

Desculpa se entendi errado, mas você quer saber como retirar o efeito do texto "andando" com o hover?

 

se for isso, é facil... retire os margin-top do seu codigo, como visualizei pelo link que você postou.

 

Para dar o efeito de pressionado, uma alternativa é colocar um tom mais escuro nas fontes, no caso um cinza claro.

 

Caso não for isso, pode me explicar melhor?

 

Abraços

[Evandro Oliveira 331]

Posso fazer uma pergunta cretina? Qual a utilidade do [inline]<span>[/inline] ali?