Ir para conteúdo

POWERED BY:

Arquivado

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

LuHciAno

[Resolvido] Fundo em Jquery

Recommended Posts

Olá galera!

bem estou fazendo meu site pessoal e estou usando muito jquery nele.. é uma posibilidade de aprender esse frameworks que estou adorando.

 

bem minha dúvida é a seguinte:

 

eu estou fazendo uma area de portifolio onde tem um fundo da div em branco e a imagem.

quando passar o mouse em cima da imagem muda a cor da div.

 

ate ai tudo bem.. o codigo em jquery seria esse:

 

$(document).ready(function() {
  $('.quadro img').hover(function(){
	$('.quadro').css("background-color","yellow");
  }, function(){
	$('.quadro').css("background-color","white");
  });
});

meu codigo em html:

 

<div id="galeria">
				<div class="quadro">
					<img src="img/quadrop.jpg" height="70" width="113" border="0" />
				</div>
				<div class="quadro">
					<img src="img/quadrop.jpg" height="70" width="113" border="0" />
				</div>
				
			</div>

e o css:

 

#meio #portifolio .quadro{
	width:121px;
	height:78px;
	background:#FFFFFF;
	margin-top:18px;
	float:left;
	margin-left:10px;
}

#meio #portifolio .quadro img{
width:113px;
height:70px;
margin:4px;

}

certo vamos lá para a minha duvida..

voces podem ver no codigo html que ele gera 2 divs iguais com float: left .. que é para fica uma do lado da outra

 

so que quando passo o mouse em cima de uma imagem o fundo das 2 divs fica amarelo pois elas tem a mesma class isso eu sei..

eu queria saber e como faço para que so mude a cor da div que o mouse está em cima da imagem..

 

isso tem que ser dinamico , sei que tem que fazer um loop mais não sei como fazer no jquery.

e nem na div.

 

alguem pode me da uma luz?

 

valeuuu..

Compartilhar este post


Link para o post
Compartilhar em outros sites

então usando o each você percorre os elementos.. e usando o $(this) para referenciar o elemento atual do loop...

 

$(document).ready(function() {
	
  $('.quadro').each(function(){
	$(this).hover(function(){
		$(this).css("background-color","yellow");
	},function(){
		$(this).css("background-color","white");
	});
	});
});

 

t+

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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