Aparecer div em hover

[Wesley Kovalski 0]

Bom dia a todos!
Queria saber como exibir uma div ao passar o mouse em cima de uma imagem, por exemplo:

 

Existe uma imagem de um filme:

 

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

 

Ao passar o mouse em cima dessa imagem, irá aparecer uma div ao lado mostrandos todos os detalhes do filme, ou seja, um resumo do filmes, e com o botão (VER MAIS).

 

Estou usando um exemplo assim:

<style type="text/css">

#exemplo{

width:90%;

height:auto;

padding:10px;

background:#d3d3d3;

position:relative;

}

#mouse {

width:200px;

height:100px;

fonte-size:16px;

background:#abcdef;

position: relative;

top: 5px;

left:0;

line-height:100px;

border:1px solid #000;

}

#comentario {

position:absolute;

top:0;

left:170px;

padding:2px;

line-height:20px;

background:#333;

color:#fff;

display: block;

width:120px;

opacity: 0;

float:left;

-webkit-transition: all 300ms ease;

-moz-transition: all 300ms ease;

-ms-transition: all 300ms ease;

-o-transition: all 300ms ease;

transition: all 300ms ease;

}

#mouse:hover #comentario{

opacity: 1;

}

</style>

<div id="exemplo">

<div id="mouse"> Passe o mouse aqui!

<div id="comentario"> Esse é um comentário. </div>

</div>

</div>

Mas ao passar ou mouse em cima da div (comentario) ela aparece, o certo teria que aparecer apenas se passar ou mouse em cima da div (mouse).

Obrigado a todos!!!

Até mais!

[androidel 7]

Recomendo para este fator utilizar Javascript ou a biblioteca JQuery (principalmente JQuery). A JQuery tem várias funções para o que você quer fazer.

[WESLEY8521 2]

eu não entendi se tu quer que apareça a dive mause ou comentário, mas en todo caso, fazer a correção no teu codigo acresentando a linha em destaque. depois me diz se funcionou

#mouse {

width:200px;

height:100px;

fonte-size:16px;

background:#abcdef;

position: relative;

top: 5px;

left:0;

line-height:100px;

border:1px solid #000;

display: none;

}

#mouse:hover{display:block}

[Lauro Daniel 15]

Olá, também usei o mesmo exemplo e tive o mesmo problema, após me estressar um pouco encontre uma solução no link:

 

 

http://www.scriptbrasil.com.br/forum/topic/140995-resolvidoaparecer-uma-caixa-de-dialogo-ao-passar-o-mouse/

 

 

O código é:

 

 

<img src="http://localdaimagem.gif" onmouseover="getElementById('descricao').style.display='block'" onmouseout="getElementById('descricao').style.display='none'" />
<div id="descricao" style="position:relative; height:100px; width:100px; background:#FF0000; top:15px;left:40px">Descrição da Imagem, isso é uma div e você pode colocar o que quise aqui!</div>

[pedrohsb 6]

Você pode também usar com CSS...

 

Veja o código no link abaixo:

:seta: http://jsfiddle.net/pedrohsb/qt5vjmrr/

 

Atenciosamente,

Pedro HSB