Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou editando uma página e atualmente ela está assim:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img13.deviantart.net/dbc9/i/2017/059/2/1/com_by_martinyewerton-db0rjrk.png&key=10507ab8fc30404aaa59b2e13228ab9cb89519fca5ade51d514089b82454c8bd" width="1000" />
mas eu preciso criar <div> (ou não sei qual será o recurso) para que eu consiga inserir um texto explicativo quando passar o mouse sobre um quatro itens do lado (cada item com uma informação).
Como faz isso?Procure por: CSS tooltip
O HTML:
>
Citar
<html>
<head>
<style type="text/css">
#container {
height:auto;
width:550px;
margin-left:auto;
margin-right:auto;
margin-top:120px;
margin-bottom:120px;
}
#bloco{
text-align: center;
margin: auto;
color:#272727;
height:130px;
width:550px;
padding-top:15px;
text-align:justify;
border-bottom:1px solid #eeeeee;
margin-bottom:15px;
background-color:#ffffff;
font-size:12px;
vertical-align:middle;
}
#descricao {
width:auto;
height:auto;
background-color:transparent;
margin-left:140px;
margin-right:20px;
padding:5px;
vertical-align:center;
}
#capa img {
height:110px;
width:110px;
padding:3px;
margin-left:15px;
margin-top:0px;
float:left;
}
.posicao{
display:inline;
width:50px;
position:absolute;
height:15px;
letter-spacing:-2px;
font-family: 'Product Sans';
font-size:32px;
padding-left:5px;
padding-right:15px;
padding-bottom:5px;
font-weight:bold;
text-transform:uppercase;
margin-bottom: 5px;
margin-top:-10px;
margin-left:-70px;
color: #272727;
text-align:right;
background-color:transparent;
text-align:right;
}
.musica{
position:relative;
font-size:20px;
font-weight:bold;
letter-spacing:0px;
padding-top:5px;
font-family: "Product Sans";
background:#fff;
text-align:center;
}
.sobre{
position:relative;
font-size:18px;
letter-spacing:0px;
height:40px;
padding-top:5px;
padding-left:7px;
padding-right:7px;
margin-bottom:10px;
background:#fff;
color: #272727;
text-align:center;
vertical-align:middle;
}
</style>
</head>
<body>
<div id="container">
<div id="bloco">
<div class="posicao">1</div>
<div id="capa"><img src="https://68.media.tumblr.com/75dbc58e26d9564ebe646a9a7cce2786/tumblr_om59s3pCSa1w79jh9o1_1280.jpg"></div>
<div id="descricao"><div class="musica"><a href="https://regster.tumblr.com/search/teenage-dream"><b>TEENAGE DREAM</b></a><br></div>
<div class="sobre"><a href="https://regster.tumblr.com/search/katy-perry">Katy Perry</a></div></div></div>
<div id="bloco"><div class="posicao">2</div>
<div id="capa"><img src="https://68.media.tumblr.com/a8616784d746db051313eb1af466b117/tumblr_om59s3pCSa1w79jh9o2_1280.jpg"></div><div id="descricao">
<div class="musica"><a href="https://regster.tumblr.com/search/born-this-way"><b>BORN THIS WAY</b><br></a>
</div><div class="sobre"><a href="https://regster.tumblr.com/search/lady-gaga">Lady Gaga</a></div></div></div>
</div>Se você utiliza BootStrap, ele já possui esse recurso. Se não utiliza ainda, dê uma atenção a ele:
Você poderia usar o Bootstrap, mas caso queira fazer manualmente.
Ficaria algo assim.
HTML:
<div id="box"></div>
<div id="informacao">Digite a informação desejada aqui!</div>
CSS:
#box {
width: 100px;
height: 100px;
border-radius: 5px;
background-color: grey;
}
#informacao {
width: auto;
height: auto;
display: inline-block;
visibility: hidden;
position: absolute;
padding: 5px 10px 5px 10px;
border-radius: 5px;
background-color: #000;
color: #fff;
}#box:hover + #informacao {
visibility: visible;
}
**Exemplo:** [https://jsfiddle.net/renancardosofc/tds8me70/](https://jsfiddle.net/renancardosofc/tds8me70/)
OBS: Caso queira colocar a #informação dentro do #box, é só substituir + por >
Assim:#box:hover > #informacao {
visibility: visible;
}
Você pode utilizar o ":hover" na div.
Ficaria mais fácil te ajudar se tivesse o seu código.