Problema con A:Hover

[nolose]

Hola amigos, tengo un problema con mi css, cuando intento poner mas de un A:Hover, solo me aparece en mi web, el 1º que he definido.

He encontrado varios post que tratan este tema de usuarios que les pasaba lo mismo que a mi, pero no consigo hacerlo funcionar yo. He intentado a poner a:hover#hover1, definirlo de mil maneras, ect, pero no consigo arreglarlo... y el caso es que lo necesito con un poco de urgencia porque llebo dias intentando arreglarlo y se me echa el plazo de entrega en clase encima.

Pongo aqui mi codigo a ver si alguien pudiera decirme como es....


Gracias!!!!!!


.csslocalizacion {
font-family: verdana;
font-size: 11px;
COLOR: #333333;
}

.cssrojo {
font-family: verdana;
font-size: 11px;
COLOR: #990000;
}

.cssrojo_grande {
font-family: verdana;
font-size: 15px;
COLOR: #990000;
}

.cssrojo_grande2 {
font-family: verdana;
font-size: 15px;
COLOR: #EB051F;
}

.cssnegro {
font-family: verdana;
font-size: 11px;
COLOR: #000000;
}

.fila_0 {
font-family: verdana;
font-size: 21px;
COLOR: #FFFFFF;
background-color: #E3E8EC;
}

.fila_1 {
font-family: verdana;
font-size: 21px;
COLOR: #FFFFFF;
background-color: #ECF1F6;
}

.csstyle {
font-family: verdana;
font-size: 11px;
COLOR: #FFFFFF;

}


A:hover {
COLOR: #CCCCCC; TEXT-DECORATION
}
A {
FONT-WEIGHT: none; FONT-SIZE: 11px; COLOR: #FFFFFF; FONT-STYLE: normal; FONT-FAMILY: verdana; TEXT-DECORATION: none
}

[margancia]

nolose...

cuando vos pones en el css a:hover... se aplica a todos los links existentes en el sitio..

Para agregar otros a:hover... tenes que hacer lo siguiente...

Por ejemplo un caso...

<div id="contenedor"><a href="seccion.html">Link</a></div>

En el css le das color al hover de este link de la siguiente manera...

#contenedor a:hover {color:#ffffff;}

En caso de que sea <div class="contenedor"><a href="seccion.html">Link</a></div>

.contenedor a:hover {color:#ffffff;}

En caso de que sea <p id="footer"><a href="seccion.html">Link</a></p>

p#footer a:hover {color:#ffffff;}

Espero que se haya entendido!

Saludos

[nolose]

y puedo dejar el A:hover general y luego poner como tu dices el contenedor para un caso especifico??

[bleckfala]

si porque estas especificando que el div se maneja por el id contenedor

[Calizman]

Saludos!!

El problema que tiene es algo bastante basico. El problema que tu tienes es de orden.

Para que tu a:hover funcione, tienes segui este orden.

a:link{}
a:visited{}
a:hover{}
a:focus{}
a:active{}

De esta forma, todos funcionaran correctamente

te dejo Este enlace que te amplía la informacion de las pseudo-clases.

A:hover {
COLOR: #CCCCCC; TEXT-DECORATION
}
A {
FONT-WEIGHT: none; FONT-SIZE: 11px; COLOR: #FFFFFF; FONT-STYLE: normal; FONT-FAMILY: verdana; TEXT-DECORATION: none
}

Si ves aqui lo tienes al reves, y las propiedades en mayusculas. Siempre es mejor trabajar en minusculas el CSS.

Y para la proxima, recuerda ponerle algo al text-decoration, no lo escribas si no le vas a poner propiedades no?

Espero que te sirva! Hasta Luego!!

[nolose]

Acabo de hacer algunas mejoras, pero creo que no acabo de cojerlo...

Como veis, quiero que cssrojo, tenga otro a hover distinto (lo pongo abajo)

.csslocalizacion {
font-family: verdana;
font-size: 11px;
color: #333333;
}

.cssrojo_grande {
font-family: verdana;
font-size: 15px;
color: #990000;
}

.cssrojo_grande2 {
font-family: verdana;
font-size: 15px;
color: #EB051F;
}

.cssnegro {
font-family: verdana;
font-size: 11px;
color: #000000;
}

.fila_0 {
font-family: verdana;
font-size: 21px;
color: #FFFFFF;
background-color: #E3E8EC;
}

.fila_1 {
font-family: verdana;
font-size: 21px;
color: #FFFFFF;
background-color: #ECF1F6;
}

.csstyle {
font-family: verdana;
font-size: 11px;
color: #FFFFFF;

}

a:link{color: #FFFFFF; text-decoration: none}
a:visited{color: #FFFFFF; text-decoration: none}
a:hover{color: #CCCCCC; text-decoration: none}
a:active{color: #FFFFFF; text-decoration: none}



.cssrojo {
font-family: verdana;
font-size: 11px;
color: #990000;
}

#cssrojo a:hover {color:#333333;}

[Calizman]

jmm... en todo caso seria asi:

.cssrojo { bla bla }
.cssrojo:hover { bla bla }

Tienes que tener en cuenta que cuando pones a:hover estas diciendo que solo los links tendran el hover activado, porque antepones la etiqueta a, de esta forma funciona el hover.

Si le pones cssrojo:hover entonces estas haciendo que todo el elemento tenga hover.

Ahora si lo entiendes mejo? deberias ver el enlace que te envié, esta muy bien detallado el uso del hover.

[nolose]

FENOMENAL!!!! ya lo consegui...

Muchas gracias a todos por vuestra ayuda :):) Dejo posteado aqui la solución por si le sirve de ayuda a alguien.

El a:hover hace el efecto de cambio color a TODOS los links, y el .cssnegro:hover solo le afecta al estilo cssnegro, podeis ponerselos a tantos estilos como querais.


.csslocalizacion {
font-family: verdana;
font-size: 11px;
color: #333333;
}

.cssrojo {
font-family: verdana;
font-size: 11px;
color: #990000;
}

.cssrojo_grande {
font-family: verdana;
font-size: 15px;
color: #990000;
}

.cssrojo_grande2 {
font-family: verdana;
font-size: 15px;
color: #EB051F;
}

.fila_0 {
font-family: verdana;
font-size: 21px;
color: #FFFFFF;
background-color: #E3E8EC;
}

.fila_1 {
font-family: verdana;
font-size: 21px;
color: #FFFFFF;
background-color: #ECF1F6;
}

.csstyle {
font-family: verdana;
font-size: 11px;
color: #FFFFFF;

}

/*PARA PONER UN LINK EN OTRO COLOR CONCRETO... USAMOS LAS ETIQUETAS .cssnegro:link */
/*NO OLVIDAR AÑADIRLO LUEGO EN EL a href*/

.cssnegro {
font-family: verdana;
font-size: 11px;
color: #000000;
}

.cssnegro:link{color: #000000; text-decoration: none}
.cssnegro:visited{color: #000000; text-decoration: none}
.cssnegro:hover{color: #990000; text-decoration: none}
.cssnegro:active{color: #000000; text-decoration: none}


/*Y ASI DECLARAMOS LOS ESTILOS NORMALES */

a:link{color: #FFFFFF; text-decoration: none}
a:visited{color: #FFFFFF; text-decoration: none}
a:hover{color: #CCCCCC; text-decoration: none}
a:active{color: #FFFFFF; text-decoration: none}


Un abrazo!!! y gracias de nuevo!!

[Calizman]

De nada!! Que bien que te sirviera...

SI tienes algun otro problema no dudes en preguntar eh!

Hasta Luego!!

[TylinTylyn]

puedes aplicar clases tambien

a.link2:hover no se q mas lo siento pero mas o menos asi es es que ase tiempo no uso css :D