Ir para conteúdo

POWERED BY:

Arquivado

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

Bryan Linconl

[Resolvido] jQuery, CSS e HTML

Recommended Posts

Gente, pelo amor de Deus, se alguém puder me ajudar eu agradeço muito!!!

É que eu estou desenvolvendo um site (sabe, sou marinheiro de primeira viagem...), e tive de começar o projeto por um erro muito complicado acho que com o HTML ou PHP, mas não vem ao caso... Minha questão agora é que, nesse novo projeto, eu fiz uma "função" com o jQuery que faz a classe "imagem" tenha diminua a transparência até 0.6, para meio que "revelar" a classe "texto", que está de certo modo por baixo dela. O efeito saiu bem como eu esperava, acontece que eu havia feito um cabeçalho fixo, no topo, com um menu Drop-down, que deveria permanecer na página acima de todos os elementos com uma opacidade reduzida (também um efeito jQuery).

A questão é que quando eu desço a página, as imagens ficam sobre o cabeçalho, o que não deveria acontecer. Já tentei corrigir esse erro, mas acho que o meu conhecimento é um tanto escasso para isso. Alguém pode me ajudar?

 

JQUERY>>

//cabeçalho
$('#header').stop().fadeTo(2000, 0.6);
$('#header').mouseover( function(){
	$(this).stop().fadeTo('fast', 1);
});
$('#header').mouseleave( function(){
	$(this).stop().fadeTo(2000, 0.6);
});
$('.imagem')
.mouseover( function(){
	$(this).children().stop().fadeTo(300, 0.6);
})
.mouseleave( function(){
	$(this).children().stop().fadeTo(300, 1.0);
});

HTML>> IMAGEM>>

<div id="corpo">
	<div id="esquerda">
		<div id="posts">
			<div class="texto"><p>Texto </p></div>
			<div class="imagem"><img src="post/01.jpg" /></div>
		</div>
	</div>
</div>

CSS>> IMAGEM>>

#corpo { width:1000px; height:980px; background:#FFF; padding:90px 10px 40px 10px; box-shadow:0 0 50px #059;}
#corpo #esquerda { float:left; margin:10px; padding:10px; width:660px; overflow:auto;}
#corpo #esquerda #posts{ float:left; margin:0 10px; }
#corpo #esquerda #posts .texto{ width:190px; height:140px; background:#000; color:#FFF; padding:5px;}
#corpo #esquerda #posts .imagem img{ width:200px; height:150px; position:relative; margin:-300px 0 17px 0;}

Compartilhar este post


Link para o post
Compartilhar em outros sites

A sua dúvida é sobre css.

 

Estude sobre a propriedade z-index

Compartilhar este post


Link para o post
Compartilhar em outros sites

A sua dúvida é sobre css.

 

Estude sobre a propriedade z-index

 

Valeu ai William!!! Vou estudar!

 

putz véi!!

Valeu msm, nem imaginava que era tão fácil assim, foi só colocar a imagem como "z-index:1", e o cabeçalho como "z-index:2"... Valeu msm!!!

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.