Jump to content
ewertonmartiny

Inserir item na página HTML

Recommended Posts

Estou editando uma página e atualmente ela está assim:

com_by_martinyewerton-db0rjrk.png

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?

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

Se você utiliza BootStrap, ele já possui esse recurso. Se não utiliza ainda, dê uma atenção a ele:

http://getbootstrap.com/javascript/#tooltips

Share this post


Link to post
Share on other sites

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/

 

OBS: Caso queira colocar a #informação dentro do #box, é só substituir + por >

Assim:

#box:hover > #informacao {
	visibility: visible;
}

 

  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By PedroHRLeite
      Estou querendo deixar um rodapé fixo no topo a medida que o mesmo alcança o topo da página, porém estou encontrando dificuldades ao utilizar position: sticky, segue o código completo, se eu colocar a configuração de sticky na classe .side-column funciona bem, porém quero apenas no footer, alguém saber como resolver?
      <!DOCTYPE html> <html> <head> <style> .wideBody .side-column { float: right; order: 2; width: 300px; } .wideBody .side-column footer { position: sticky; position: -webkit-sticky; top: 0; } .wideBody .main-column { align-self: flex-start; float: left; width: 500px; border: 2px solid #4CAF50; } .resultados { border: 2px solid #4CAF50; margin-bottom:25px; position:relative; } footer { border: 2px solid #4CAF50; } </style> </head> <body class="wideBody"> <main> <div> <div class="main-column"> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> </div> <aside class="side-column"> coluna auxiliar <div class="resultados"> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> </div> <footer> rodape fixo </footer> </aside> </div> </main> </body> </html>  
    • By Juan Carlos PT
      Olá, eu quero poder pegar um vídeo do meu canal na Nimo TV e deixar ele em sites parceiros para fortalecer a minha divulgação. Só que não consigo capturar o código <video></video> do html5 do site na Nimo TV. Eles não mostram o formato do vídeo:
       

      Se alguém souber me ajudar, terei enorme gratidão!
       
      OBS: Perdão se alguém postou algo parecido aqui no site, não vi!

    • By Roberto S. Santos
      Bom dia.
      Eu gostaria de postar uma foto do meu computador no facebok usando VB.NET com login automático.
      Teria como fazer em VB.net ou HTML ?
      Obrigado.
    • By Carlos Longo
      Srs Bom dia,
       
      fiz inumeras tentativas para mostrar a imagem com link em:
       <script type="text/javascript"> var imagens =  new Array( '1.jpg', '2.jpg', '3.jpg','4.jpg', '5.jpg', '6.jpg'); var num_img = 6; var img_atual =0; function ChangeImg() { if (img_atual < (num_img - 1) ) { img_atual = img_atual + 1; } else { img_atual = 0; } document["img_apoio"].src = "http://www.ficasimples.com.br/calcfal/prop/" + imagens[img_atual]; var x = setTimeout ("ChangeImg()", 2000); }   </script>  
      ela posteriormente é chamada assim:
      queria que ao clicar na figura fosse chamado o link da figura especifica conforme valor da variavel  imagens[img_atual]/////
      <img name="img_apoio" src="http://www.ficasimples.com.br/calcfal/prop/1.jpg" alt="" border="0"width="190px" height="210px" align="center">  
       
      poderiam me ajudar??
       
      grato
       
      Carlos
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.