4 replies to this topic

[Marcelo-M4]

Bom, pretendo colocar em CSS 2 tipos de MouseOver nos links.
Tipo assim, um CSS com nome .texto1 é de cor preta e qdo é linkado, fica preto e com o mouse over fica cinza e sublinhado.
Outro CSS seria .texto2 e de cor branca, com link ficaria branco e com mouseover cinza claro e sublinhado.
Sei que deve ser meio banal, mas estou com dificuldades nisso...podem me ajudar?

[Fábio]

http://www.maujor.com/

Recomendo que você dê uma boa lida nesse site antes de aventurar com CSS.

.texto1 {
color:#000;
}
a.texto1:hover{color:#fff;text-decoration:underline;}

.texto2 {
color:#fff;
}
a.texto2:hover{color:#ccc;text-decoration:underline}

Você pode achar estranho, mas aprendi muito com esse código!
Por isso fiz até uma página de exemplo, vide anexo.

Espero que funcione!

Attached Files

•  exemplo_cores_link.htm   694bytes   17 downloads

[Marcelo-M4]

Pô Fábio, valew brother.

Eu passei a tarde ontem lá no majour, estudando e tentando solucionar essa parada rs.
Valeu mesmo, tava indo nessa direção que vc apontou, mas ainda não tinha sacado como diferenciar os "a:" valeu de novo.

[Fábio]

É, eu também me enrolei um pouco nisso.. tive até que dar uma lida nuns artigos... por isso que eu disse que ele foi importante pra mim.

[Marcelo-M4]

Fábio, segui o seu exemplo e pelo o que pareçe consegui atingir um resultado satisfatório.
Agora apareçeu um problema inesperado, quando coloco o link para o usar o .texto1 a frase fica em azul ao invés de preto.
segue o meu código:

<link rel="stylesheet" href="estilo_1_2006.css" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>

<style type="text/css">
<!--
a:link,a:visited,a:hover,a:active{text-decoration: none;}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Trebuchet MS;
font-size: 11px;
}
.style1 {color: #000000}
-->
</style>

Onde em estilo_1_2006.css coloquei a CSS com as instruções iguais as suas
Segue abaixo:

.texto1 {
font-family: Trebuchet MS;
color:#000000;
font-size: 11pt;
}
a.texto1:hover{color: #999999;text-decoration:underline;}

.texto2 {
font-family: Verdana;
color:#ffffff;
font-size: 10pt;
font-style: italic;
font-wieght: bold;
}
a.texto2:hover{color: #CCCCCC ;text-decoration:underline}

.texto3 {
font-family: "Trebuchet MS";
color:#FFFFFF;
font-size:10px
}
a.texto3:hover{color: #CCCCCC ;text-decoration:underline}

Não entendi essa rs... dá um help ae