Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

marcelo sampaio

[Resolvido] Aparecer legendas quando o mouse passar em cima ( efe

Por , em Javascript

Recommended Posts

marcelo sampaio    0

marcelo sampaio
Postado

Olá a todos volto aqui com mais uma dúvida..estou tentando criar um efeito de quando o mouse passar em cima da Foto apareça uma legenda.

consegui fazer mas quando passo o mouse em cima de Foto a Ação dispara para todas as outras. quero que cada um legenda apareça individualmente para cada foto.

desde já agradeço atenção de vcs todos, muito obrigado.

 

segue o código abaixo.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>galeria</title>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script  type="text/javascript">

$(document).ready(function(){

	$(" #galeria ul li h1 ").hide();


	$(" #galeria ul li ").hover(
		function over(){ $("#galeria ul li h1").slideDown("fast"); },
		function out() { $("#galeria ul li h1").slideUp("fast"); }
	)

})

</script>


<style type="text/css">
body { font-family:Verdana, Geneva, sans-serif }
* { margin:0; padding:0 }
#galeria { width:700px; margin: 0 auto; padding:10px; border: 1px solid #333 }
#galeria ul { list-style:none }
#galeria ul li { float:left; height:150px; width:200px; border: 10px solid #EBEBEB; background:#E5E5E5; margin: 0 0 10px 10px; position:relative }
#galeria ul li h1 { position:absolute; top:110px; display:block; background:#F00; font-size:16px; padding:3px ; color:#FFF; width:194px}


</style>

</head>

<body>

<div id="galeria">
   	<ul>
       	<li>
           	<img src="http://www.lelilaschic.com.br/florpermanente.jpg"/>
               <h1> Legenda 01 </h1>
           </li>

           <li>
           	<img src="http://www.lelilaschic.com.br/florpermanente.jpg"/>
               <h1> Legenda 01 </h1>
           </li>

           <li>
           	<img src="http://www.lelilaschic.com.br/florpermanente.jpg"/>
               <h1> Legenda 01 </h1>
           </li>
           <li>

           	<img src="http://www.lelilaschic.com.br/florpermanente.jpg"/>
               <h1> Legenda 01 </h1>
           </li>

           <li>
           	<img src="http://www.lelilaschic.com.br/florpermanente.jpg"/>
               <h1> Legenda 01 </h1>
           </li>

       </ul>
       <div style="clear:both"></div>
   </div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você tb precisa entender e usar o objeto this

 

leitura:

http://wbruno.com.br/blog/2011/06/21/afinal-e-javascript/

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelo sampaio    0

marcelo sampaio
Postado

bem como ainda sou iniciante..não consegui acompanhar a leitura..

logo não entendi o "this"

 

você poderia fazer os ajustes no codigo para eu ver como se faz.. eu acho que com isso ficara mais fácil a minha compreensão

 

eu agradeço muito a ajuda!

 

muito obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

na verdade, eu estaria te atrapalhando se alterasse por você..

 

se não entendeu na primeira leitura, leia de novo. A resposta está lá.

Primeiro realmente tente, escrevi aquele tutorial para iniciantes mesmo.

 

 

 

 

 

Depois que tiver tentado, veja esse exemplo, e releia de novo o artigo:

                $(" #galeria ul li ").hover(
                       function(){ $(this).find('h1').slideDown("fast"); },
                       function() { $(this).find('h1').slideUp("fast"); }
               );

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelo sampaio    0

marcelo sampaio
Postado

você tem razão! muito obrigado por me apontar a solução que contrubui muito pro meu aprendizado.. li e re-li o artigo que por sinal eh muito bom.

li com mais calma e paciência e com certeza ja aprendi um pouco mais.. muito obrigado pelo apoio mesmo,

só tenho mais uma duvida não ficou bem claro pra mim o que o 'find' faz.. mas isso eu vou pesquisar mais um pouquinho.

 

mas desde já agradeço muito muito mesmo!! muito obrigado mesmo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

o .find() encontra um elemento filho do elemento anteriormente casado pela regra css

 

http://api.jquery.com/find/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito