Efeito MouseOver com CSS

[Blog Lundquist 0]

Boa noite galera do forum,

 

Eu uso um pequeno CSS pra fazer um efeito bem bacana que vou mostrar abaixo:

.follower a img {
opacity:0.8;filter:
alpha(Opacity=80);
border:3px solid #ffffff;
display:block;
}

.follower a img:hover {
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
border:3px solid #2D9F2D;
display:block;
}

Com este efeito usado no blogger eu consigo o seguinte:

 

Até ai tudo legal!!!

Agora eu quero usar o código inverso, estar com 100% e ao passar o mouse cai para 80% e com borda, mas eu quero usar isto em imagem a parte, ja tentei o seguinte:

 

.menuimg a img {
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
border:3px solid #ffffff;
display:block;
}

.menuimg a img:hover {
opacity:0.8;filter:
alpha(Opacity=80);
border:3px solid #0F0;
display:block;
}

mas na hora que eu uso o class="menuimg" no código da imagem simplesmente não acontece nada... Sabem como posso utiliza-lo em uma imagem?

[Jonathan Queiroz 1]

Agora eu quero usar o código inverso, estar com 100% e ao passar o mouse cai para 80% e com borda, mas eu quero usar isto em imagem a parte

Como assim ?

Se quer fazer isso em uma única imagem você deve utilizar o atributo "id", ao invés de "class" (ou criar uma classe diferente)

[Blog Lundquist 0]

Ok, tentei usando id e também não deu...

[Ronaldo Bitencourt 0]

Boa noite Blog Lundquist, você tem certeza que esse código é compatível com os browsers mais usados como IE6, IE7 e FF?

 

Por CSS essas formas de aplicar transparência não são válidas muitas vezes pra se chegar um resultado final em diversos browsers diferentes é preciso usar hacks.

 

Uma dica:

Use jQuery e aplique sua transparência sem medo algum, jQuery é uma #@?$%~ ferramenta e ele faz funcionar na maioria dos browsers pra não dizer todos veja um exemplo abaixo:

 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
<script  type="text/javascript">
$(document).ready(function(){
	//USE ESTA CLASSE QUANDO QUISER APLICAR TRANSPARENCIA DE 80% PARA UM ELEMENTO NO EVENTO ONMOUSEOVER
	$(".hover_transp_8").mouseover(function(){
		$(this).css("opacity","0.8")
	});
	//USE ESTA CLASSE QUANDO QUISER APLICAR NENHUMA TRANSPARENCIA NO EVENTO ONMOUSEOVER DE UM ELEMENTO
	$(".hover_transp_1").mouseover(function(){
		$(this).css("opacity","1")
	});
	//USE ESTA CLASSE QUANDO QUISER QUE UM ELEMENTO FIQUE COM TRASNAPARENCIA 80% EM SEU ESTADO NORMAL
	$(".normal_transp_8").css("opacity","0.8")
	});
});
</script>

Cara esta é minha dica, não recomendo utilizar transparência por CSS mas por JS ai sim use e abuse, ainda mais utilizando jQuery ai sim tenha certeza de sucesso em qualquer plataforma.

 

 

Abração espero ter ajudado!