Foros del Web » Creando para Internet » CSS »

como defino el color (hover) pero dentro de la propiedad "style" de un link?

Estas en el tema de como defino el color (hover) pero dentro de la propiedad "style" de un link? en el foro de CSS en Foros del Web. Hola gente. El tema es asi, yo tengo este pedacito de codigo Código HTML: <a href= "#" style= "color:#000000; text-decoration: none;" > link </a> ..quisiera ...
  #1 (permalink)  
Antiguo 10/11/2005, 14:31
 
Fecha de Ingreso: enero-2004
Ubicación: Córdoba
Mensajes: 42
Antigüedad: 13 años, 11 meses
Puntos: 0
Pregunta como defino el color (hover) pero dentro de la propiedad "style" de un link?

Hola gente. El tema es asi, yo tengo este pedacito de codigo

Código HTML:
<a href="#" style="color:#000000; text-decoration: none;">link</a> 
..quisiera saber como defino el color de hover pero si o si dentro de la propiedad style del <a>, tiene que ser asi si o si. Se puede?
  #2 (permalink)  
Antiguo 10/11/2005, 14:35
Avatar de leoj90
Usuario baneado!
 
Fecha de Ingreso: agosto-2005
Mensajes: 1.365
Antigüedad: 12 años, 4 meses
Puntos: 0
Asi:
Código:
<style type="text/css">
a:link,a:visited {
text-decoration: none;
color: #0000CC;
}
a:hover {
text-decoration: none;
color: #0000CC;
}
</style>
  #3 (permalink)  
Antiguo 10/11/2005, 18:45
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Más bien metelo en el head, dentro del mismo a no se puede.
  #4 (permalink)  
Antiguo 11/11/2005, 12:31
 
Fecha de Ingreso: enero-2004
Ubicación: Córdoba
Mensajes: 42
Antigüedad: 13 años, 11 meses
Puntos: 0
no se puede??

Gracias leoj90 por tu respuesta pero no era eso lo que quería, perdon si no me explique bien. Eso ya sabia como se hacia pero el tema era meterlo en el mismo tag a dentro de la propiedad style. Esta seguro Rafael que dentro de la misma etiqueta a no se puede?? Bueno.. gracias de nuevo por sus respuestas.. Sigo intentando. Chauu
  #5 (permalink)  
Antiguo 11/11/2005, 14:49
Avatar de leoj90
Usuario baneado!
 
Fecha de Ingreso: agosto-2005
Mensajes: 1.365
Antigüedad: 12 años, 4 meses
Puntos: 0
Q yo sepa no se puede.. dentro del "style" solo se ponen por ej: formatos de texto (color, tipo de letra, decoración..), formatos de tablas (borde, color...).. nunca vi algo asi..
  #6 (permalink)  
Antiguo 12/11/2005, 00:25
Avatar de Microbito  
Fecha de Ingreso: octubre-2001
Ubicación: Cd. Juárez, Chihuahua, México
Mensajes: 829
Antigüedad: 16 años, 2 meses
Puntos: 6
yo no se mucho de CSS, pero investigando hace un tiempo hice algo similar asi:

Código HTML:
<a href="#" style="color:#009933;"

onMouseOver="this.style.cssText='color: #cc0000'" 

onMouseOut="this.style.cssText='color: #009933'"> Enlace </a> 
espero que pueda ayudar
  #7 (permalink)  
Antiguo 12/11/2005, 19:15
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Bueno, interesante recurrir a javascript para meterlo dentro de la etiqueta, y en cierta forma si es css. Solo tomar el sistema con sus reservas.
  #8 (permalink)  
Antiguo 12/11/2005, 19:50
Avatar de leoj90
Usuario baneado!
 
Fecha de Ingreso: agosto-2005
Mensajes: 1.365
Antigüedad: 12 años, 4 meses
Puntos: 0
Cita:
Iniciado por Microbito
yo no se mucho de CSS, pero investigando hace un tiempo hice algo similar asi:

Código HTML:
<a href="#" style="color:#009933;"

onMouseOver="this.style.cssText='color: #cc0000'" 

onMouseOut="this.style.cssText='color: #009933'"> Enlace </a> 
espero que pueda ayudar
Alli yo no veo nada de css, solo la etiqueta style q está de más alli....
onMouseOver y onMouseOut son eventos de js, asi q nada q ver..
Pero, haber, porq no usas clases y listo? en vez de tratar de hacerlo con style, q no se puede.... porq te la complicas tanto ?
  #9 (permalink)  
Antiguo 13/11/2005, 03:32
Avatar de Microbito  
Fecha de Ingreso: octubre-2001
Ubicación: Cd. Juárez, Chihuahua, México
Mensajes: 829
Antigüedad: 16 años, 2 meses
Puntos: 6
bien, como les comenté no se mucho de CSS, ese ejemplo lo utilice en alguna pagina por que funcionaba como queria, pero la cuestion aqui es, Marche: por que quieres establecer el hover en la etiqueta A? cual es el inconveniente para no usar el estilo en la cabecera?
  #10 (permalink)  
Antiguo 13/11/2005, 19:02
(Desactivado)
 
Fecha de Ingreso: febrero-2005
Ubicación: Azcapotzalco
Mensajes: 299
Antigüedad: 12 años, 10 meses
Puntos: 2
Ese problema yo muchas veces lo he tenido, tambien muchas veces me habia preguntado si se podia

¿porque no usar una clase definida en la cabecera en lugar de meterla dentro del tag a?

Siempre hago uso de hojas de estilo, ahora cuando tienes una gran lista de links y quieres que
uno y solo uno
actue de alguna forma especial, por ejemplo

Código:
<a class="style1">blabla....</a>
<a class="style1">....</a>
<a class="style1">....</a>
<a class="style1">....</a>
<a class="style1">....</a>
<a class="style1">....</a>
<a class="style1" style="hover:font: 12 px tahoma"  ????>justo aqui es donde esta el problema</a>
<a class="style1">....</a>
<a class="style1">....</a>
<a class="style1">....</a>
<a class="style1">....</a>
<a class="style1">...blabla</a>
El problema es crear una nueva clase para un solo link por eso es que es mucho mas practico aplicar el style="" exclusivamente al elemento que quieres que varie.

Ahora no puedes modificar la clase en la hoja de estilos porque es la misma hoja para varias paginas

y volvemos a lo mismo es necesario crear una nueva clase "style2" por uno y solo un elemento dentro de todas tus plantillas.
  #11 (permalink)  
Antiguo 13/11/2005, 19:44
Avatar de leoj90
Usuario baneado!
 
Fecha de Ingreso: agosto-2005
Mensajes: 1.365
Antigüedad: 12 años, 4 meses
Puntos: 0
Nop, las clases para los links son faciles, solo tienes q escribir unas cuantas letras:
.menu {
font-size: 10pt;
}
A.menu:link,A.menu:visited {
text-decoration: none;
color: #0000CC;
}
A.menu:hover {
text-decoration: overline;
}


Y creas la clase "normal" para los otros links.....
A:link,A:visited {
color: #800000;
}
A:hover {
color: #FF0000;
}


No se la compliquen, a veces es MUCHO MEJOR escribir unas letritas de más.. (ya parezco el guille, ajjaja, 'se los van a pillar los magos' )

Puedes hacer las clases q quieras... todo va a ser para q tu web se vea mejor y no todo con el mismo color/efecto.
  #12 (permalink)  
Antiguo 14/11/2005, 08:39
 
Fecha de Ingreso: enero-2004
Ubicación: Córdoba
Mensajes: 42
Antigüedad: 13 años, 11 meses
Puntos: 0
Sonrisa gracias!!!!

Bueno gente, ante que nada quiero agradecerles a todos por su respuestas. Ya se que me complico la vida haciendolo de la manera que les digo. Se que sería mucho mas facil crear una clase y listo. El tema es q realmente lo necesito hacer de esa forma. Voy a probar con lo que dijo Microbito y si se de otra forma de hacerlo lo posteo al instante. Gracias de nuevo y suerte a todos.
  #13 (permalink)  
Antiguo 14/11/2005, 11:28
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola todos :

No entiendo por qué no hay una forma de poner seudo elementos ( como el hover ) in line. Pero parece que es así.

Lo de poner -en general- estilos in line, es para HTML, en XHTML ya no funciona.
Y es cierto que no tiene mucho sentido poner una clase/identificador para un solo y mugroso elemento. De hecho, el CSS era una ayuda para que los diseñadores no tuvieran que repetir atributos en cada etiqueta y hasta en cada documento, no para que hubiera que hacerlo solamente de esa forma; pero de última, como dice loej90 ( )

Cita:
... las clases para los links son faciles, solo tienes q escribir unas cuantas letras ...
Me gustaría saber qué caso especial es ese que solamente permite escribir en el atributo style=""; si se tiene acceso a la hoja de estilos, claro.

Por otro lado,

Código:
this.style.cssText='color: #cc0000'
es para IExplorer, además de que borra cualquier estilo declarado previamente. Una forma más eficiente es

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title></title>
<style>

a{font-size:200%; }

</style>
</head><body>


<a href="#" onmouseover="this.style.color='#000000'; this.style.textDecoration='none'" onmouseout="this.style.color='#ff0000'; this.style.textDecoration='underline overline'" >link</a>

<br />

<a href="#" onfocus="this.style.color='#008000'; this.style.textTransform='capitalize'" onblur="this.style.color=''; this.style.textTransform=''"  >link</a>

</body></html>
Otra manera sería

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style>
a{font-size: 200%; }
.otroEnlaceLink {color: #ff0000; text-decoration: underline overline; }
.otroEnlaceHover {color: #000000; text-decoration: none; }

</style>
</head><body>


<a href="#" class="enlace" onmouseover="this.className='otroEnlaceHover'; " onmouseout="this.className='otroEnlaceLink'; " >link</a>

</body></html>
saludos

furoya
  #14 (permalink)  
Antiguo 14/11/2005, 11:45
Avatar de leoj90
Usuario baneado!
 
Fecha de Ingreso: agosto-2005
Mensajes: 1.365
Antigüedad: 12 años, 4 meses
Puntos: 0
Mmm.. pero alli ya nos salimos de Css, eso ya es Js.
Conclusión: Usar clases o a lo mucho js, porq no entendemos el porqué ponerlo dentro de "style" (q no se puede).
  #15 (permalink)  
Antiguo 15/11/2005, 07:08
 
Fecha de Ingreso: enero-2004
Ubicación: Córdoba
Mensajes: 42
Antigüedad: 13 años, 11 meses
Puntos: 0
De acuerdo hola!!

Gracias furoya por tu aporte. Me sirvió para resolver un problema de compatibilidad entre los navegadores. Y con respecto a que lo quiero poner dentro del style o bueno en este caso que tambien use js es porque es un codigo que le doy al usuario para que pegue en su html y asi no tiene que hacer un enlace con un archivo .css
  #16 (permalink)  
Antiguo 09/10/2009, 10:09
 
Fecha de Ingreso: mayo-2009
Mensajes: 210
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: como defino el color (hover) pero dentro de la propiedad "style" de un lin

me sirvio lo de javascript, gracias
  #17 (permalink)  
Antiguo 25/10/2009, 10:56
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: como defino el color (hover) pero dentro de la propiedad "style" de un lin

Bueno, de nada; a ambos. En tu caso, con un poco de atraso, Marche. Por alguna razón no vi tu último mensaje; y es una lástima, porque mi ejemplo tenía también una última parte que no publiqué porque creí que el tema se terminaba así.

Ahora que veo que todavía siguen aprovechando el código, la agrego y explico el resto.

Resulta que sí se puede hacer sólo con CSS. El tema es que no desde el elemento como "in line", pero sí desde el body, porque las hojas de estilo se cargan en orden y la última reemplaza a la anterior cuando coinciden la propiedad y el valor.

Si no podemos cambiar una hoja de estilos externa, al menos podemos leerla; y copiando solamente la parte que queremos cambiar, nos alcanza para pegarla en el cuerpo de la página con nuestros valores modificados.

Un ejemplo con hover : si el sitio tiene una hoja como

estilo.css

Código:
body {font-style: italic; }

#encabezado a:link {color: white; background-color: gray; }
#encabezado a:visited {color: lime; }
#encabezado a:hover {color: teal; background-color: silver; }
#encabezado {background-color: gray; }
La podemos descargar y verla para copiar el código que nos interesa. Lo modificamos y lo pegamos en el body de esta forma

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>CAMBIAR ESTILOS EXTERNOS.</title>
<link href="estilo.css" rel="stylesheet" rev="stylesheet" type="text/css">
</head>
<body>

<!-- Comienza estilo modificado -->
<style type="text/css">
#encabezado a:link {color: green; background-color: silver; }
#encabezado a:visited {color: aqua; }
#encabezado a:hover {color: yellow; background-color: red; }
</style>
<!-- Termina estilo modificado -->

<div id=encabezado><a href="http://www.forosdelweb.com/">Foros del Web</a> | 
<a href="http://www.forosdelweb.com/f53/como-defino-color-hover-pero-dentro-propiedad-style-link-349071/">como defino el color (hover) pero dentro de la propiedad "style" de un link?</a> | 
<a href="javascript:void(0)">Enlace Falso</a>
</div>

<h2>Encabezado con estilos de <tt>hover</tt> desde c&oacute;digo en <tt>body</tt>.</h2>

<a href="http://www.forosdelweb.com/">Foros del Web</a> | 
<a href="http://www.forosdelweb.com/f53/como-defino-color-hover-pero-dentro-propiedad-style-link-349071/">como defino el color (hover) pero dentro de la propiedad "style" de un link?</a> | 
<a href="javascript:void(0)">Enlace Falso</a>
</body>
</html>
También se puede pegar justo encima de </body>, para asegurarnos de que se va a cargar siempre después de la hoja externa; pero es medio exagerado.


Ahora que lo pienso, debí postear todo esto en su momento, pero no quise hacerlo hasta saber qué motivo había para no cambiar el archivo linkeado originalmente.
Y se me pasaron los años por no revisar mis temas pendientes ...
  #18 (permalink)  
Antiguo 15/11/2015, 10:23
 
Fecha de Ingreso: julio-2010
Mensajes: 37
Antigüedad: 7 años, 5 meses
Puntos: 1
Respuesta: como defino el color (hover) pero dentro de la propiedad "style" de un lin

Yo te dare la solucion para cambiar el color de un link con codigo CSS, cuando todos ya tienen un color predeterminado desde el <body> u otras etiquetas como el <ul><li><div> etc.

La idea me la dio el compañero de arriba, asi que busque remedio porque yo tambien tenia el mismo problema y lo he solucionado así, no es necesario escribir dentro del "style", es mejor hacerlo por "ID".

Coje tu <a href=""> y metele una ID, ejemplo:


<a id="linksestilo2" href=""></a>

Seguidamente en el <head> o en tu archivo CSS introduce las propiedades del ID:

Código:
#linksestilo2:link {color: white;}
#linksestilo2:visited {color: white; }
#linksestilo2:hover {color: red; }

Y listo, tienes toda tu web y tus secciones de diferente color exceptuando las que tu selecciones que tendrán otro color.

P.D.: Si quieres afectar a los links que hayan dentro de una seccion solo tienes que añadirle al codigo que coja las etiquetas <a>.


Código:
#linksestilo2 a:link {color: white;}
#linksestilo2 a:visited {color: white; }
#linksestilo2 a:hover {color: red; }
Ejemplo:

Código:
<ul>
<li  id="linksestilo2" class="a la misma vez del class que tu quieras si quieres añadirlo">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</li>
</ul>
Un Saludo, espero que te sirva.

Aunque el post sea viejo, se sigue revisando por internet cuando la gente busca esta solución, preferi ya que la encontré, dejarla marcada para los que aun busquen lo mismo :)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:42.