problema con a:hover

dondemola · #1 (**permalink**) 24/04/2012, 16:47

Hola,

Estoy intentado que al pasar el raton por encima de un hipervinculo este cambie de color. Por algun motivo no consigo hacerlo y no entiendo por qué.

Tengo escrito lo siguiente en el codifo fuente.

<style type="text/css" media="screen">
.EMILIO {
color: #CCC;
font-family: Tahoma, Geneva, sans-serif;
font-size: 29px;
}
.EMILIO a:link { color: #CCC; font-size: 8pt; font-family: tahoma; text-decoration: none }
.EMILIO a:hover { color: #fff; font-size: 8pt; font-family: tahoma; text-decoration: none }
.EMILIO a:visited { color: #CCC; font-size: 8pt; font-family: tahoma; text-decoration: none }
</style>

Y luego en body:

<div id="apDiv5"><span class="EMILIO"><a href="link cualquiera">Architecture</a></div>

El caso es que no funciona lo del cambio de color, y curiosamente solo es ese el que que falla. Soy capaz de cambiar el tipo y tamaño de letra pero no el color. ¿que estoy haciendo mal?

saludos

Oscar_Hidro · #2 (**permalink**) 24/04/2012, 16:54

No deberia haber problema alguno @dondemola, pero probablemente sea por la etiqueta <span> que no ha sido cerrada.

dondemola · #3 (**permalink**) 24/04/2012, 17:01

Si la cierro tal como me has indicado (<span>), la cosa empeora pues considera class="EMILIO" como texto.

Entiendo que esta cerrada tal como la tengo ahora <span class="EMILIO">

alguna otra sugerencia.

tengo tambien escrito por ahi lo siguiente. Pero solo hace referencia al fondo

a:hover {
background-color: rgb(51, 153, 153);
}

Y ya digo, si cambio los valores de tamaño y tipo de letra si funciona.

Oscar_Hidro · #4 (**permalink**) 24/04/2012, 17:10

prueba darle la clase "EMILIO" a la etiqueta <a></a>. Que quede de la siguiente manera:

Código HTML:

Ver original<div id="apDiv5"><span><a class="EMILIO" href="link cualquiera">Architecture</a></span></div>

Oscar_Hidro · #5 (**permalink**) 24/04/2012, 17:16

Cita:

Entiendo que esta cerrada tal como la tengo ahora <span class="EMILIO">

La etiqueta <span>, requiere de ser cerrada tambien con una diagonal al final del contenido que va dentro de ella. Puesto que su funcion es la de envolver cualquier contenido dentro de ella, requiere ser concluida como si fuera una etiqueta de parrado(<p></p>), de link(<a></a>) y otras mas.

dondemola · #6 (**permalink**) 24/04/2012, 17:16

Acabo de abrir el archivo con IE en lugar de chrome y si funciona... Aqui ya si que me pierdo. ¿No reconoce chrome el codigo fuente?

He probado esto ultimo que me has comentado y en chrome sigue sin funcionar.

Oscar_Hidro · #7 (**permalink**) 24/04/2012, 17:19

Por lo regular, los problemas se dan en IE jaja

Seria bueno que postearas tu codigo para ver el problema, ya que yo lo probe en firefox, crome y tambien en ie y si da el efecto hover. Entonces debe de haber algo mal por ahi en tu codigo

dondemola · #8 (**permalink**) 24/04/2012, 17:22

Gracias Oscar. Copio y pego

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Emilio Esteban</title>
<style type="text/css" media="screen">
A:link { color: #666; font-size: 18pt; font-family: arial; text-decoration: none }
A:hover { color: #666; font-size: 18pt; font-family: arial; text-decoration: none }
A:visited { color: #666; font-size: 18pt; font-family: arial; text-decoration: none }
.EMILIO {
color: #CCC;
font-family: Tahoma, Geneva, sans-serif;
font-size: 29px;
}
.EMILIO a:link { color: #CCC; font-size: 8pt; font-family: tahoma; text-decoration: none }
.EMILIO a:hover { color: #f00; font-size: 12pt; font-family: tahoma; text-decoration: none }
.EMILIO a:visited { color: #CCC; font-size: 8pt; font-family: tahoma; text-decoration: none }
.arc {
color: #666;
font-family: Tahoma, Geneva, sans-serif;
font-size: 22px;
}
.arc a:link { color: #CCC; font-size: 8pt; font-family: tahoma; text-decoration: none }
.arc a:hover { color: #CCC; font-size: 8pt; font-family: tahoma; text-decoration: none }
.arc a:visited { color: #CCC; font-size: 8pt; font-family: tahoma; text-decoration: none }
.CATEGORIAS {
color: #CCC;
font-family: Tahoma, Geneva, sans-serif;
font-size: 24px;
}
.CATEGORIAS a:link { color: #CCC; font-size: 8pt; font-family: tahoma; text-decoration: none }
.CATEGORIAS a:hover { color: #CCC; font-size: 8pt; font-family: tahoma; text-decoration: none }
.CATEGORIAS a:visited { color: #CCC; font-size: 8pt; font-family: tahoma; text-decoration: none }
#apDiv1 {
position:absolute;
width:236px;
height:115px;
z-index:1;
left: 410px;
top: 331px;
}
#apDiv2 {
position:absolute;
width:132px;
height:115px;
z-index:1;
left: 587px;
top: 96px;
}

a { display: block;
}
a:hover {
background-color: rgb(51, 153, 153);
}
#apDiv1 {
position:absolute;
width:225px;
height:115px;
z-index:2;
left: 66px;
top: 16px;
}
body {
background-color: #1F1F1F;
}
#apDiv2 {
position:absolute;
width:1201px;
height:115px;
z-index:3;
left: 39px;
top: 71px;
}
#apDiv3 {
position:absolute;
width:1201px;
height:37px;
z-index:3;
left: 39px;
top: 645px;
}
#apDiv4 {
position:absolute;
width:200px;
height:115px;
z-index:4;
left: 64px;
top: 214px;
}
#apDiv5 {
position:absolute;
width:142px;
height:115px;
z-index:5;
left: 64px;
top: 240px;
}
</style>
</head>

<body>
<div id="apDiv1">
<td><span class="EMILIO">Emilio Esteban</span><br>
<span class="arc">architecture design</span></div>

<div id="apDiv2"><hr width="1200" size="1" color="#444" /></div>
<div id="apDiv3"><hr width="1200" size="1" color="#444" /></div>
<div id="apDiv4"><hr width="300" size="1" color="#555" /></div>
<div id="apDiv5"><span class="EMILIO"/><a href="link cualquiera" class="EMILIO">Architecture</a></div>
</body>
</html>

Oscar_Hidro · #9 (**permalink**) 24/04/2012, 17:31

A modo de consejo, siempre que publiques codigo, utiliza la opcion para envolver codigo y te lo muestre mas ordenado, dependiendo del codigo que quieras publicar. En este caso es HTML.

La opcion la encuentras aqui arriba al lado de donde le das formato a tu texto cuando quieres publicar un comentario, es la opcion donde dice "Highlight", y te desplegará las opciones de lenguajes.

Y bueno, tu problema esta en la misma linea de codigo

Código HTML:

Ver original<div id="apDiv5"><span class="EMILIO"/><a href="link cualquiera" class="EMILIO">Architecture</a></div>

Si te fijas, estas repitiendo la clase EMILIO tanto en la etiqueta <span> como en la etiqueta <a>. Deja nada mas especificada la clase en la etiqueta <a>.

Y la etiqueta <span> la estas cerrando de esta manera: <span />. La manera correcta es cerrarla como la etiqueta <a>, es decir:

Código HTML:

Ver original<span><a class="EMILIO">...</a></span>

dondemola · #10 (**permalink**) 24/04/2012, 17:45

Entonces, ¿tiene que quedar asi?

Código HTML:

Ver original<div id="apDiv5"><span><a href="http://www.barrabes.com" class="EMILIO">Architecture</a></span></div>

Sigue sin funcionar. Me estoy volviendo loco jejeje

Veo que en dreamweaver tengo asignados, y no se como porque la caja apDiv5 tiene claramente asignada una clase, varios tamaños de letra para a:hover... puede que ese sea el fallo... voy a copiar el codigo a un archivo nuevo.

Edito. perdona esto ultimo no es cierto, me he confindido.

Oscar_Hidro · #11 (**permalink**) 24/04/2012, 18:01

Efectivamente asi es como debe de quedar el div, pero te debo una disculpa, el error esta en el css al momento de otorgar el efecto hover.

Lo que pasa es que el efecto hover lo estas asignando a la clase "EMILIO", y para que funcione, se lo tenemos que asignar al div "apDiv5". De modo que queda de la siguiente manera en el css:

Código CSS:

Ver original#apDiv5 a:hover { color: #906; font-size: 12pt; font-family: tahoma; text-decoration: none; }

Oscar_Hidro · #12 (**permalink**) 24/04/2012, 18:07

Y pensandolo bien, y viendo que resulta, el problema era lo que comentabamos al principio en el span.

Si hay que asignar la clase "EMILIO" en la etiqueta <span>, pero no funcionaba por que no cerrabas bien la etiqueta de span. Quedaria de manera correcta asi:

Código CSS:

Ver original#EMILIO a:hover { color: #906; font-size: 12pt; font-family: tahoma; text-decoration: none; }

Código HTML:

Ver original<div id="apDiv5"><span class="EMILIO"><a href="http://www.barrabes.com">Architecture</a></span></div>

Esta es la forma correcta y no funcionaba por que cerrabas mal el span

kseso? · #13 (**permalink**) 25/04/2012, 05:47

La etiqueta | span | es para marcar una parte de un elemento y diferenciar dicha parte del resto del elemento. No puede contener (o no debería) a todo un elemento de rango superior. Y mucho menos, no es el caso, elementos de bloque.

Dicho de otra forma, un enlace puede contener un span para marcar una parte del contenido del enlace, pero nol enlace completo. Para ello, aplique la clase diréctamente a |<a>|.

Creo, no he leído a fondo y mucho menos he probado códigos, que si domina los conceptos de especificidad, herencia y cascada en css podrá resolver este tipo de cuestiones.

dondemola · #14 (**permalink**) 25/04/2012, 09:26

Hola de nuevo. Ayer eran casi las 2 de la mañana en madrid y andaba ya muy cansado.

Oscar he cambiado el codigo tal cual me lo has puesto y sigue sin funcionar.

He instalado firefox que no lo tenia y he probado a abrir con éste, IE y Chrome el archivo. Los dos primeros los abren correctamente (IE no lee bien las <hr> pero eso es aparte) En cambio chrome no es capaz de cambiar el color de las letras.

¿A ti te funciona en chrome? Voy a probar en otro ordenador

Hola de nuevo Kseso? Tampoco domino tanto pero algo voy aprendiendo

Oscar_Hidro · #15 (**permalink**) 25/04/2012, 10:02

Que tal dondemola, asi es, de hecho tengo el chrome por defecto y probe tu codigo. Funciona bien. Pon de nuevo tu codigo para ver como lo implementaste, puede que haya quedado algun detalle que haga que no funcione.

dondemola · #16 (**permalink**) 25/04/2012, 10:28

Hola Oscar. El codigo lo tengo tal y como me lo pusiste la ultima vez, pero sigue sin funcionar. Lo curioso es que he copiado al archivo a un ordenador de un amigo, lo he abierto con chrome y se visualiza en otro color.

Es más, las cambios tamaño si que se efectuan al pasar el raton por encima, pero los de color no.

¿donde puede estar el problema? Sin duda en el codigo no esta, ya que en otro ordenador funciona y en el tuyo tambien.

Oscar_Hidro · #17 (**permalink**) 25/04/2012, 10:33

Puede que borrando historial de navegacion y cookies pueda mostrarse correctamente. Despues de esto, actualizas la pagina y veamos que hace. Desconosco por que pueda estar fallando en tu navegador chrome, pero es importante que se vea en otro equipo.

Prueba con esto y nos dices que paso

dondemola · #18 (**permalink**) 25/04/2012, 10:37

Lo has clavado!!

Muchas gracias Oscar!!

Oscar_Hidro · #19 (**permalink**) 25/04/2012, 10:44

Por nada dondemola, un abrazo y exito con tu proyecto.

dondemola · #20 (**permalink**) 25/04/2012, 11:01

A ver si lo consigo.

Josemlperez2001 · #21 (**permalink**) 18/06/2013, 10:19

Cita:

Iniciado por dondemola

Hola,

Estoy intentado que al pasar el raton por encima de un hipervinculo este cambie de color. Por algun motivo no consigo hacerlo y no entiendo por qué.

Tengo escrito lo siguiente en el codifo fuente.

<style type="text/css" media="screen">
.EMILIO {
color: #CCC;
font-family: Tahoma, Geneva, sans-serif;
font-size: 29px;
}
.EMILIO a:link { color: #CCC;
font-size: 8pt;
font-family: tahoma;
text-decoration: none
}
.EMILIO a:hover {
color: Blue;
font-size: 8pt;
font-family: tahoma;
text-decoration: none
}
.EMILIO a:visited { color: #CCC;
font-size: 8pt;
font-family:
tahoma;
text-decoration: none
}
</style>

Y luego en body:

<div id="apDiv5"><span class="EMILIO"><a href="link cualquiera">Architecture</a></div>

El caso es que no funciona lo del cambio de color, y curiosamente solo es ese el que que falla. Soy capaz de cambiar el tipo y tamaño de letra pero no el color. ¿que estoy haciendo mal?

saludos

Yo lo he probado y funciona lo que pude nota es que esta cambiando a color blanco. lo pumce que lo cambie para el color azul.