Tengo un caso en el que debo escribir código CSS en línea, y quiero aplicar un estilo de vuelo en un ancla.
¿Cómo puedo usar a:hover en el CSS en línea dentro del atributo de estilo HTML?
Respuestas
¿Demasiados anuncios?
Respuesta corta: no puedes.
Respuesta larga: no deberías.
Dale un nombre de clase o una identificación y usa hojas de estilo para aplicar el estilo.
:hover es un pseudo-selector y, para CSS sólo tiene sentido dentro de la hoja de estilo. No hay ningún equivalente de estilo en línea (ya que no define los criterios de selección).
Respuesta a los comentarios de la OP:
Ver _Totalmente Pwn CSS con Javascript para un buen script en la adición de reglas CSS dinámicamente. También vea Cambiar la hoja de estilo_ para algunas de las teorías sobre el tema.
Además, no olvides que puedes añadir enlaces a hojas de estilo externas si eso es una opción. Por ejemplo,
<script type="text/javascript">
var link = document.createElement("link");
link.setAttribute("rel","stylesheet");
link.setAttribute("href","http://wherever.com/yourstylesheet.css");
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
</script>Precaución: lo anterior supone que hay una cabeza sección.
Alex S
Puntos
4742
Puedes obtener el mismo efecto cambiando tus estilos con JavaScript en el onMouseOver y onMouseOut parámetros, aunque es extremadamente ineficiente si necesitas cambiar más de un elemento:
<a
href="abc.html"
onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'"
>Text</a>Además, no puedo recordar con seguridad si this funciona en este contexto. Puede que tengas que cambiarlo con document.getElementById('idForLink') .
Fahad Uddin
Puntos
3139
Usted puede hazlo:
<a href="http://www.w3.org/"
style="{color: #900}
:link {background: #ff0}
:visited {background: #fff}
:hover {outline: thin red solid}
:active {background: #00f}">...</a>(Pero estoy de acuerdo con otros chicos como no deberías hacerlo.)
snm-yah
Puntos
2067
Rex M
Puntos
80372
No puedes hacer exactamente lo que estás describiendo, ya que a:hover es parte del selector, no de las reglas del CSS. Una hoja de estilo tiene dos componentes:
selector {rules}Los estilos en línea sólo tienen reglas; el selector está implícito para ser el elemento actual.
El selector es un lenguaje expresivo que describe un conjunto de criterios para hacer coincidir elementos en un documento de tipo XML.
Sin embargo, puedes acercarte, porque un style El set puede técnicamente ir a casi cualquier lugar:
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>
