quando passar o cursor sobre a imagem aparecer legenda

alexmestre · April 6, 2012 at 10:28 PM

Boas novamente,

Neste momento estou a tentar fazer algo novo, consiste em quando passar o cursor sobre a imagem juntamente com o efeito rollover tambem cair a legenda por baixo.

😉

HappyHippyHippo · April 7, 2012 at 08:31 AM

podes simplesmente usar css para detectar o "hover" do rato fazendo aparecer um div escondido ...

pedrotuga · April 7, 2012 at 10:22 PM

http://www.w3schools.com/jsref/event_onmouseover.asp

alexmestre · April 8, 2012 at 09:35 AM

podes simplesmente usar css para detectar o "hover" do rato fazendo aparecer um div escondido ...

eu ja fiz isso de criar o div escondido e resulta mas o problema é que eu se passar com o rato ao lado da imagem ela faz aparecer a legenda

HappyHippyHippo · April 8, 2012 at 11:07 AM

tens o div mal feito ...

alexmestre · April 9, 2012 at 10:29 AM

como asssim eu tenho isto:

<div id='pai'>
    <a href="iframe/V2 - Laranja/V2-Laranja.html"><img src="images/menu/foto 1 min 1.jpg" onMouseOver="this.src='images/menu/foto 1 min 2.jpg'" onMouseOut="this.src='images/menu/foto 1 min 1.jpg'" /></a>

   <div id="sera-mostrada">
      <p>V2 - Laranja</p>
  </div>
</div>

e o css é :

#pai #sera-mostrada {
display:none;
left:inherit;
position:inherit;
}
#pai:hover #sera-mostrada {
display:block
}

alexmestre · April 9, 2012 at 01:16 PM

como assim tenho a div mal feita?

HappyHippyHippo · April 10, 2012 at 10:34 AM

<html>
  <head>
    <style>
#pai {
background-color: #ddd;
height: 82px; /* ajustar ao tamanho da imagem */
}
#pai img {
height: 82px; /* ajustar ao tamanho da imagem */
background-color: #999;
}
#pai #sera-mostrada {
        display:none;
        left:inherit;
position: relative;
top: -20px; /* ajustar a altura pretendida */
}
#pai #sera-mostrada p {
margin: 0;
        height: 20px; /* ajustar a altura pretendida */
}
#pai:hover #sera-mostrada {
        display:block;
}
    </style>
  </head>
  <body>
    <div id='pai'>
      <a href="iframe/V2 - Laranja/V2-Laranja.html">
        <img src="images/menu/foto 1 min 1.jpg" onMouseOver="this.src='images/menu/foto 1 min 2.jpg'" onMouseOut="this.src='images/menu/foto 1 min 1.jpg'" />
      </a>
      <div id="sera-mostrada">
        <p>V2 - Laranja</p>
      </div>
    </div>
  </body>
</html>

--

Edit(brunoais):

Identificação da linguagem das tags code (estava mal escrito)

Sign In

quando passar o cursor sobre a imagem aparecer legenda

Recommended Posts

alexmestre

HappyHippyHippo

pedrotuga

alexmestre

HappyHippyHippo

alexmestre

alexmestre

HappyHippyHippo

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information