Aparecer div em hover
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!
Discussão (4)
Carregando comentários...