2

Estou fazendo um site institucional e é um tipo de agência de web-design, só que é mais pra aprender.

Então na HOME eu fiz vários bloquinhos com links para as páginas dos serviços. E em cada bloco minha intenção é fazer que ao passar o mouse por cima, apareça uma breve descrição antes do usuário clicar e ir até a página.

Eu consegui (em partes) fazer isso de duas maneiras (nas duas algo deu errado):

1º maneira - sobrepondo duas carreiras de blocos (a de cima com os ícones e títulos e a de baixo com as descrições) e quando passa o mouse em cima de algum bloco de cima ele muda o height para 0% fazendo aparecer o bloco com a descrição em baixo. Problema: qualquer movimento no mouse faz a classe sair do :hover (logicamente porque o elemento some e o mouse sai de cima).

2º maneira - só uma carreira de blocos. desse jeito a minha intenção era fazer assim: o bloco está lá com o ícone e o titulo em forma de background-image e a descrição lá (em texto dentro da div) em display:none, ai no :hover o background-image passa a ser none e descrição vira block. Problema Dessa maneira não deu certo; eu passo o mouse por cima da div e não muda o display, tentei com visibility e também não funcionou. (deixei a parte em questão visível só pra galera ver mas tá comentado no código).

Da segunda maneira eu poderia fazer a descrição em forma de imagem, daria certo: apenas mudar o background-image. Mas prejudicaria no SEO.

Também tentei com JavaScript e não consegui.

2

1 Resposta 1

6

Solução genérica:

Procurei fazer só o essencial do CSS, e "encavalei" o quadro com informações justamente para você testar o hover. Basta alterar as dimensões e posições para o layout desejado, pois essa solução é bem genérica e adaptável.

Se quiser que as duas coisas apareçam exatamente no mesmo espaço, basta colocar a largura e altura do span igual a do bloco pai.

O "segredo" da solução é por o conteúdo alternativo dentro do elemento que vai "sofrer" o hover, assim, quando ele aparece, o hover continua ativo.

(Lembre-se de ver a 2ª demonstração, lá no fim do post, que é mais completa)

a.bloquinho {
  display: block;
  position: relative;
  width: 200px;
  height: 20px;
}
.bloquinho span {
  display: none;
  position: absolute;
  top: 0;   /* ajustar como desejado */
  left: 20px; /* ajustar como desejado */
  background: #eee;
  z-index: 10;
}
.bloquinho:hover span {
  display: block;
}
<a class="bloquinho" href="#">Link 1
  <span> descrição do link bla bla bla bla bla bla bla</span>
</a>
<a class="bloquinho" href="#">Link 2
  <span> descrição do link bla bla bla bla bla bla bla</span>
</a>
<a class="bloquinho" href="#">Link 3
  <span> descrição do link bla bla bla bla bla bla bla</span>
</a>
<a class="bloquinho" href="#">Link 4
  <span> descrição do link bla bla bla bla bla bla bla</span>
</a>


Adaptando ao exemplo linkado:

Se preferir o efeito de "cortina", basta usar o span cercando o link em vez de cercar o conteúdo:

a.bloquinho {
  float:left;
  margin-right: 20px;
  display: block;
  position: relative;
  width:100px;
  height:150px;
  background: #eee;
}

.bloquinho span {
  display: block;
  position: absolute;
  top: 0;
  left: 0px;
  width:100px;
  height:150px;
  -webkit-transition: height .5s;
  transition: height .5s;
  z-index: 10;
  overflow:hidden;
}

.bloquinho:hover span {
  height: 0;
}
<a class="bloquinho" href="#">
  <span><img src="https://i.stack.imgur.com/VmVz4.jpg" width="100" height="150"></span>
  descrição do link bla bla bla bla bla bla bla
</a>
<a class="bloquinho" href="#">
  <span><img src="https://i.stack.imgur.com/VmVz4.jpg" width="100" height="150"></span>
  descrição do link bla bla bla bla bla bla bla
</a>
<a class="bloquinho" href="#">
  <span><img src="https://i.stack.imgur.com/VmVz4.jpg" width="100" height="150"></span>
  descrição do link bla bla bla bla bla bla bla
</a>
<a class="bloquinho" href="#">
  <span><img src="https://i.stack.imgur.com/VmVz4.jpg" width="100" height="150"></span>
  descrição do link bla bla bla bla bla bla bla
</a>

3
  • Tudo isso porque eu não conhecia essa forma de usar o :hover ".bloquinho:hover span ". É similar a acessar uma variável... Mas por que o :hover não funcionou sendo colocado diretamente no span?
    – ropbla9
    29/10/2014 às 5:07
  • 1
    Como vc mesmo você mencionou, se eu coloco o hover no span, ele deixa de estar em hover quando some. Desta forma, mesmo o span sumindo, o "bloquinho" vai continuar em hover.
    – Largato
    29/10/2014 às 8:20
  • Sim, eu já entendi 100%.
    – ropbla9
    30/10/2014 às 4:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .