[Resolvido] Remover opacidade de um elemento...

[RafaelNMNM 0]

Fala galera,

 

to com uma dúvida simples, mas como estou começando com jquery queria uma ajuda.

 

Eu tenho uma barra escura em um slide show com uma navegação de 3 slides (veja imagem abaixo).

 

 

Este é o xhtml do slide:

<div id="slide">
		<ul>
			<li><img src="img/img1.jpg" alt="" title="" /></li> <!-- Imagens em lista ordenada -->
		</ul>
		<div class="detalhes">
			<ul>
				<li><a href="" class="ativo" title="">1</a></li>
				<li><a href="" title="">2</a></li>
				<li><a href="" title="">3</a></li>
			</ul>
			<h3>Descrição</h3>
		</div>	
	</div>

Com jquery eu consigo dar opacidade na barra, mas os números também ficam opacos.

(function($) {
	$(document).ready(function() {
		$('#slide .detalhes').fadeTo('fast', 0.8);
	});
})(jQuery);

E fica assim:

 

 

Pergunta: Como deixar só a barra opaca e os números sem opacidade como na primeira imagem?

[William Bruno 1501]

cara, isso é um problema de html+css, veja:

<style type="text/css">
	body {
		background: #f0f;
	}
	.detalhes {
		opacity: 0.2;
		background: #ff0;
	}
	.detalhes ul {
		opacity: 1;
		background: #f00;
	}
	</style>
	<div id="slide">
		<ul>
			<li><img src="img/img1.jpg" alt="" title="" /></li> <!-- Imagens em lista ordenada -->
		</ul>
		<div class="detalhes">
			<ul>
				<li><a href="" class="ativo" title="">1</a></li>
				<li><a href="" title="">2</a></li>
				<li><a href="" title="">3</a></li>
			</ul>
			<h3>Descrição</h3>
		</div>  
	</div><!-- /slide -->

tem a tentativa ali de deixar o ul do detalhes opaco, atribuindo 1 de opacidade, mais isso não funciona.

te indico usar uma imagem .png com a transparência como background do .detalhes, é a solução mais simples que vejo.

 

Outra seria, posicionar o ul dos numerizinhos, absolutamente sobre o .detalhes, assim ele não seria filho da classe com opacidade, e o problema não aconteceria.

 

'remover' opacidade, não tô conseguindo pensar em uma forma de fazer que funcione.

Mas tem 2 alternativas ali, dá uma testada ai.

[RafaelNMNM 0]

O problema é que a propriedade opacity é CSS3, e pretendo dar suporte ao IE6+. Tbm tinha pensado em posicionar a lista dos números absolutamente, acho que é a melhor opção. Mas obrigado mesmo assim William. Vou testar com PNG transparente tbm.

 

Abraços []’s

[William Bruno 1501]

sim, sei que opacity é CSS3.

 

Só usei para exemplificar o problema e mostrar que não tem como, remover opacidade de um elemento, cujo pai possui transparência.

[RafaelNMNM 0]

É eu sei, pensei que com jQuery fosse possível, (to achando q jQuery faz tudo) rsrsr

 

Mas tah certo.. vlw!