Cómo escribir un: hover en CSS en línea?

Tengo un caso donde debo escribir código CSS en línea, y quiero aplicar un estilo de desplazamiento en un ancla.

¿Cómo puedo usar a:hover en CSS en línea dentro del atributo de estilo HTML?

Por ejemplo, no puede usar de manera confiable las clases de CSS en los correos electrónicos HTML.

Respuesta corta: no puedes.

Larga respuesta: 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 , solo tiene significado dentro de la hoja de estilos. No hay ningún equivalente en el estilo en línea (ya que no define los criterios de selección).

Respuesta a los comentarios del OP:

Vea Totally Pwn CSS con Javascript para obtener una buena secuencia de comandos al agregar reglas de CSS dinámicamente. También vea Cambiar la hoja de estilo para algunas de las teorías sobre el tema.

Además, no lo olvide, puede agregar enlaces a hojas de estilo externas si esa es una opción. Por ejemplo,

  

Precaución: lo anterior supone que hay una sección de la cabeza .

Puede obtener el mismo efecto cambiando sus estilos con JavaScript en los parámetros onMouseOver y onMouseOut , aunque es extremadamente ineficiente si necesita cambiar más de un elemento:

Más exacto decirlo, podrías hacerlo en algún momento del pasado. Pero ahora (de acuerdo con la última revisión de la misma norma, que es la Recomendación del candidato) no puede …

Estoy muy tarde contribuyendo a esto, sin embargo, me entristeció ver que nadie sugirió esto, si realmente necesitas un código en línea, esto es posible. Lo necesitaba para algunos botones emergentes, el método es el siguiente:

 .hover-item { background-color: #FFF; } .hover-item:hover { background-color: inherit; } 
  
Content

1) Agregar estilo en línea usando Javascript:

 document.head.insertAdjacentHTML('beforeend', ''); 

o un método un poco más difícil:

 document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; }; document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); }; 

2) estilos de varias palabras en Javascript:

element.style.fontSize="12px"

Las declaraciones de pseudoclass en línea no son compatibles con la iteración actual de CSS (aunque, por lo que entiendo, puede venir en una versión futura).

Por ahora, la mejor opción es, simplemente, definir un bloque de estilo directamente sobre el enlace que desea diseñar:

  Foo! 
  Go Home 

Hover es una pseudoclase y, por lo tanto, no se puede aplicar con un atributo de estilo. Es parte del selector.

De acuerdo con sus comentarios, está enviando un archivo JavaScript de todos modos. Haz la renovación en JavaScript. El método jQuery $.hover() hace fácil, al igual que cualquier otro contenedor de JavaScript. No es demasiado difícil en JavaScript directo tampoco.

Como se señaló, no puede establecer estilos en línea arbitrarios para el vuelo estacionario, pero puede cambiar el estilo del cursor del control deslizante en CSS usando lo siguiente en la etiqueta correspondiente:

 style="cursor: pointer;" 

No hay forma de hacer esto. Sus opciones son usar un JavaScript o un bloque de CSS.

Tal vez haya alguna biblioteca de JavaScript que convierta un atributo de estilo propietario a un bloque de estilo. Pero luego el código no será conforme a los estándares.

Acabo de descubrir una solución diferente.

Mi problema: tengo una etiqueta alrededor de algunas diapositivas / visor de contenido principal, así como en el pie de página. Quiero que vayan al mismo lugar en IE, por lo que todo el párrafo estará subrayado en onHover , aunque no sean enlaces: la diapositiva en su conjunto es un enlace. IE no sabe la diferencia. También tengo algunos enlaces reales en mi pie de página que sí necesitan el subrayado y el cambio de color en onHover . Pensé que tendría que poner estilos en línea con las tags de pie de página para hacer que el color cambie, pero el consejo de arriba sugiere que esto es imposible.

Solución: Di enlaces al pie de página de dos clases diferentes, y mi problema fue resuelto. onHover cambiar el color de onHover en una clase, hacer que las diapositivas onHover no tengan cambio de color / subrayado, y aún así poder tener los HREFS externos en el pie de página y las diapositivas al mismo tiempo.

Estoy de acuerdo con la sombra Puede usar el evento onmouseover y onmouseout para cambiar el CSS a través de JavaScript.

Y no digas que las personas necesitan tener JavaScript activado. Es solo un problema de estilo, por lo que no importa si hay visitantes sin JavaScript;) Aunque la mayoría de Web 2.0 funciona con JavaScript. Vea Facebook por ejemplo (muchos JavaScript) o Myspace .

Este es el mejor ejemplo de código:

Esto es bastante tarde en el juego, pero ¿cuándo usarías JavaScript en un correo electrónico HTML? Por ejemplo, en la empresa en la que trabajo actualmente (rima con Abodee), usamos el mínimo común denominador para la mayoría de las campañas de marketing por correo electrónico, y JavaScript simplemente no se está utilizando. Nunca. A menos que te refieras a algún tipo de preprocesamiento.

Como se menciona en una publicación relacionada: “Lotus Notes, Mozilla Thunderbird, Outlook Express y Windows Live Mail parecen respaldar algún tipo de ejecución de JavaScript. Nada más lo hace”.

Enlace al artículo del que se tomó esto: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients%5D

Además, ¿cómo se traduciría el estacionario a los dispositivos móviles? Es por eso que me gusta la respuesta de arriba: Long answer: you shouldn't.

Si alguien tiene más ideas sobre este tema, no dude en corregirme. Gracias.

Mi problema es que estoy construyendo un sitio web que utiliza una gran cantidad de icons de imágenes que tienen que ser intercambiados por una imagen diferente en el vuelo estacionario (por ejemplo, las imágenes de color azul se vuelven de color rojo sobre el vuelo estacionario). Produje la siguiente solución para esto:

 .container div { width: 100px; height: 100px; background-size: 100px 100px; } .container:hover .withoutHover { display: none; } .container .withHover { display: none; } .container:hover .withHover { display: block; } 
 

Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).

Puede usar la pseudoclase a:hover en hojas de estilo externas solamente. Por lo tanto, recomiendo usar una hoja de estilo externa. El código es:

 a:hover {color:#FF00FF;} /* Mouse-over link */ 

Puedes hacer id agregando una clase pero nunca en línea.

  
Hello World

2 líneas, pero puede volver a usar la clase en todas partes.