5

Como exibir uma div, que terá um resumo sobre o filme (texto), e um botão para (VER MAIS) ao passar o mouse sobre uma imagem.

Exemplo:

<a href="#">IMAGEM</a>

Ao passar o mouse em cima desse link, aparecer uma div ao lado direito, com informações sobre esse filme.

Um exemplo do que estou falando, é o site da netflix ou telecine play.

0

2 Respostas 2

17

Se você vai fazer este HTML o melhor é usar somente CSS.

Crie uma div para cada link e seu conteudo. Exemplo:

<div class="item">
    <a href="">Ver mais</a>
    <div class="descricao">Este filme é excelente! Recomendado a todas as idades</div>
</div>

Aí você pode esconder a descrição com:

.descricao{
    display: none;
}

e depois pôr visivel quando o mouse fizer hover em .item:

.item:hover .descricao{
    display: block;
}

Exemplo

Se quiser fazer o efeito de aparece/desaparecer com animações pode usar CSS transitions.
Exemplo

7
  • 2
    Boa Sergio, assim não precisa usar Javascript :p Commented 17/02/2014 às 12:21
  • Acredito que com visibility ficaria mais elegante ;) Commented 17/02/2014 às 12:22
  • @Beterraba, é conforme o gosto :) Por isso adicionei o segundo exemplo ;)
    – Sergio
    Commented 17/02/2014 às 12:23
  • Só é bom lembrar que isso não funciona em IE9 ou inferior. Pois ele não aceita pseudo-seletores quando não é o último seletor. Commented 17/02/2014 às 12:38
  • @GabrielGartz, verdade. Por curiosidade estive a ver estatisticas sobre IE9 e já só 3% parece usar.
    – Sergio
    Commented 17/02/2014 às 12:43
5

Algo como o .show e .hide do jQuery resolvem esse problema:

JS:

$("div.conteudo > img").hover(function() {
    $(this).next(".divDoLadoDireito").show(); //hover in
}, function() {
    $(this).next(".divDoLadoDireito").hide(); //hover out
});

HTML:

<div id="conteudo">
  <img src="images/imagem.jpg" />
  <div class="divDoLadoDireito hide">
      <p></p>
  </div>
</div>
1
  • Na minha opnião, a melhor solucao foi a indicada pelo Sergio, podes obter o resultado desejado apenas com .css o jQuery e' sempre uma dependencia no teu codigo.
    – antao
    Commented 17/02/2014 às 15:44

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 .