Cómo escribir un: hover en CSS en línea?
Tengo un caso en el que debo escribir código CSS en línea, y quiero aplicar un estilo hover 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 clases CSS de manera confiable en correos electrónicos HTML.
18 answers
Respuesta corta: no puedes.
Respuesta larga: no deberías.
Dale un nombre de clase o un id 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 estilo. No hay ningún equivalente de estilo en línea (ya que no está definiendo los criterios de selección).
Respuesta a los comentarios del OP:
Véase Totalmente Pwn CSS con Javascript para un buen script sobre la adición de reglas CSS dinámica. Ver también Cambiar hoja de estilo para algunos de la teoría sobre el tema.
Además, no olvide que puede agregar enlaces a hojas de estilo externas si esa 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 asume que hay una sección head.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-25 16:11:49
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:
<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. Es posible que tenga que cambiarlo con document.getElementById('idForLink').
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-07 05:05:37
Más preciso es decir, podrías hacerlo en algún momento del pasado. Pero ahora (de acuerdo con la última revisión del mismo estándar, que es la Recomendación del candidato) no puede ...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-04 07:46:16
Llego muy tarde a contribuir a esto, sin embargo, me entristeció ver que nadie sugirió esto, si realmente requiere código en línea, esto es posible hacer. Lo necesitaba para algunos botones de hover, el método es este:
.hover-item {
background-color: #FFF;
}
.hover-item:hover {
background-color: inherit;
}<a style="background-color: red;">
<div class="hover-item">
Content
</div>
</aEn este caso, el código en línea: "background-color: red;" es el color del interruptor en hover, coloque el color que necesita allí y luego esta solución funciona. Me doy cuenta de que esto puede no ser la solución perfecta en términos de compatibilidad, sin embargo, esto funciona si es absolutamente necesario.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-10 09:41:09
No puedes hacer exactamente lo que estás describiendo, ya que a:hover es parte del selector, no de las reglas CSS. Una hoja de estilos tiene dos componentes:
selector {rules}
Los estilos en línea solo 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 emparejar elementos en un documento similar a XML.
Sin embargo, puede acercarse, porque un conjunto style técnicamente puede ir a cualquier lugar:
<html>
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-02 14:19:59
1) Agregar estilo en línea usando Javascript:
document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');
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"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-11 12:57:11
Las declaraciones de pseudoclase 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, su mejor apuesta es probablemente definir un bloque de estilo directamente encima del enlace que desea estilizar:
<style type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-18 12:56:32
<style>a:hover { }</style>
<a href="/">Go Home</a>
Hover es una pseudo clase, y por lo tanto no se puede aplicar con un atributo de estilo. Es parte del selector.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-11 14:54:24
Como se ha señalado, no puede establecer estilos en línea arbitrarios para pasar el cursor, pero puede cambiar el estilo del cursor en CSS usando lo siguiente en la etiqueta apropiada:
style="cursor: pointer;"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-25 16:20:01
De acuerdo con sus comentarios, está enviando un archivo JavaScript de todos modos. Haga el rollover en JavaScript. El método jQuery's $.hover() lo hace fácil, al igual que cualquier otro envoltorio JavaScript. Tampoco es demasiado difícil en JavaScript directo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-25 16:14:53
No hay manera de hacer esto. Sus opciones son usar un bloque JavaScript o CSS.
Tal vez haya alguna biblioteca JavaScript que convierta un atributo de estilo propietario en un bloque de estilo. Pero entonces el código no será compatible con el estándar.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-08 07:14:57
Acabo de encontrar una solución diferente.
Mi problema: Tengo una etiqueta <a> alrededor de algunas diapositivas/visor de contenido principal, así como etiquetas <a> en el pie de página. Quiero que vayan al mismo lugar en IE, por lo que todo el párrafo estaría subrayado onHover, aunque no sean enlaces: la diapositiva en su conjunto es un enlace. IE no conoce la diferencia. También tengo algunos enlaces reales en mi pie de página que necesitan el subrayado y el cambio de color onHover. Pensé que tendría que poner estilos en línea con las etiquetas de pie de página para hacer el cambio de color, pero el consejo de arriba sugiere que esto es imposible.
Solución: Di a los enlaces de pie de página dos clases diferentes, y mi problema se resolvió. Pude tener el cambio de color onHover en una clase, tener las diapositivas onHover sin cambio de color/subrayado, y aún así poder tener los HREF externos en el pie de página y las diapositivas al mismo tiempo!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-08 07:23:59
Este es el mejor ejemplo de código:
<a style="color:blue;text-decoration: underline;background: white;" href="http://aashwin.com/index.php/education/library/" onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'">Library</a>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-07 05:04:57
Estoy de acuerdo con shadow. Puedes usar los eventos onmouseover y onmouseout para cambiar el CSS a través de JavaScript.
Y no digas que la gente necesita tener activado JavaScript. Es solo un problema de estilo, por lo que no importa si hay algunos visitantes sin JavaScript ;) Aunque la mayor parte de Web 2.0 funciona con JavaScript. Ver Facebook por ejemplo (mucho JavaScript) o Myspace.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-01 06:14:48
Esto es bastante tarde en el juego, pero ¿cuándo usarías JavaScript en un correo electrónico HTML? Por ejemplo, en la compañía para la que actualmente trabajo (rima con Abodee), usamos el mínimo común denominador para la mayoría de las campañas de email marketing, y JavaScript simplemente no se está utilizando. Nunca. A menos que se refiera a algún tipo de preprocesamiento.
Como se mencionó en un post relacionado: "Lotus Notes, Mozilla Thunderbird, Outlook Express y Windows Live Mail parecen admitir 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]
Además, ¿cómo se traduciría hovering a dispositivos móviles? Por eso me gusta la respuesta de arriba:Long answer: you shouldn't.
Si alguien tiene más ideas sobre este tema, por favor siéntase libre de corregirme. Agradecer.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-12 21:13:11
Mi problema fue que estoy construyendo un sitio web que utiliza una gran cantidad de iconos de imagen que tienen que ser intercambiados por una imagen diferente en el hover (por ejemplo, azul-ish imágenes a su vez rojo-ish en el hover). 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;
}<p>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).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>He introducido un contenedor que contiene el par de imágenes. El primero es visible y el otro está oculto (display:none). Al pasar el cursor sobre el contenedor, el primero se oculta (display:none) y el segundo vuelve a aparecer (pantalla: bloque).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-29 19:05:09
Puede usar la pseudo-clase a:hover solo en hojas de estilo externas. Por lo tanto, recomiendo usar una hoja de estilo externa. El código es:
a:hover {color:#FF00FF;} /* Mouse-over link */
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-25 16:19:21
Puede hacer id agregando una clase pero nunca en línea.
<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>
2 líneas pero puede reutilizar la clase en todas partes.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-04 19:47:27