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

[Marche]

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?

[leoj90]

Asi:

Código:

<style type="text/css">
a:link,a:visited {
text-decoration: none;
color: #0000CC;
}
a:hover {
text-decoration: none;
color: #0000CC;
}
</style>

[Rafael]

Más bien metelo en el head, dentro del mismo a no se puede.

[Marche]

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

[leoj90]

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..

[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

[Rafael]

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.

[leoj90]

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 ?

[Microbito]

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?

[xp64]

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.

[leoj90]

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.

[Marche]

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.

[furoya]

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 ( )

... 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

[leoj90]

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).

[Marche]

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

[horape]

me sirvio lo de javascript, gracias

[furoya]

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 ...

[ersamupro]

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 :)