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

1018

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

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

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

html css inline-styles Amr Elgarhy
fuente
24
Incrustar html en aplicaciones de blog también a menudo requiere el uso exclusivo de estilos en línea. Especialmente si está incrustando el html a través de un cliente externo y no tiene acceso a los temas del usuario.
providencia
8
Hay un estándar CSS propuesto para esto; no tengo idea de qué tipo de soporte de navegador podría tener (pista: podrían estar usando las etiquetas personalizadas como -moz, etc.): w3.org/TR/2002/WD-css-style-attr-20020515
Kato
1
posible duplicado de ¿Es posible crear pseudoestilos en línea?
Synetech
17
Oh vamos. A veces solo está construyendo un prototipo de página de destino y no desea tener que bifurcar las hojas de estilo o crear una nueva rama de plantilla o lo que sea solo para probar si el botón verde funciona mejor. Sheesh
ElBel
1
@FriendlyNeighborhoodIdiot Esta página tiene 13 años, el borrador ha sido abandonado desde entonces.
Tofandel

Respuestas:

573

Respuesta corta: no puedes.

Respuesta larga: no deberías.

Déle un nombre de clase o una identificación y use hojas de estilo para aplicar el estilo.

:hoveres 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 define los criterios de selección).

Respuesta a los comentarios del OP:

Vea Totally Pwn CSS con Javascript para un buen script sobre cómo agregar reglas CSS dinámicamente. También vea Cambiar la hoja de estilo para obtener información sobre la teoría sobre el tema.

Además, no olvide que puede agregar enlaces a hojas de estilo externas si 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 sección de la cabeza .

Jonathan Fingland
fuente
44
puede agregar clases de CSS en JavaScript
Jonathan Fingland
204204
Hay otras circunstancias en las que CSS en línea es la única opción, como los correos electrónicos HTML (por ejemplo, Gmail ignora CSS a menos que esté en línea). Desafortunadamente, con Javascript eliminado en la mayoría de los clientes de correo electrónico, todavía no he encontrado una forma de agregar: efectos de desplazamiento.
Simon East el
24
@Kato, si bien ese es un gran enlace, y realmente desearía que funcionara, lamentablemente no es así. Solo para confirmar, probé usando la sintaxis style="{color:green;} :hover { color: red; }"y Firefox logró colorear el enlace en verde, pero ignoré el cursor. Chrome ignoró a ambos. Las pruebas continuas serían bastante inútiles.
Jonathan Fingland el
99
No lo dije como una solución de trabajo. Dije que no era "completamente" correcto decir que no hay un equivalente en línea y que los pseudo-selectores no tienen significado fuera de las hojas de estilo. ¿Cómo es eso inapropiado?
Kato
55
¿Por qué la respuesta larga es? No deberías ... tú ... no deberías generalizar. Estaba tratando de enviar mensajes de correo electrónico con html, pero adivina qué ... gmail elimina todas las etiquetas de estilo, todas las referencias de estilo externas y todos los scripts. Entonces ... ¿hay alguna forma de cambiar el color de los enlaces dentro de los correos electrónicos enviados a gmail? ¡Espero que sí ... la esperanza es la última en morir! =)
Miguel Angelo
435

Puede obtener el mismo efecto cambiando sus estilos con JavaScript en los parámetros onMouseOvery 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>
Expandir fragmento

Además, no puedo recordar con certeza si thisfunciona en este contexto. Puede que tenga que cambiarlo con document.getElementById('idForLink').

Alex S
fuente
12
eso es inteligente! Funciona también para un efecto de <div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
desplazamiento del
46
Tengo que reírme de que esto sea visto como 'inteligente' :) Es difícil imaginar que algunas personas no estuvieran cerca cuando esta era la única / prominente forma en que podía lograr este efecto. O peor aún, para tener una 'imagen' y tener que cambiar la imagen, solo para dar el efecto 'flotar'. Me hace sentir viejo! Pero basta decir que sí responde la pregunta del OP :)
Manachi
55
Tengo que estar de acuerdo con Manachi en este caso. Esto es como un flashback de las geocities javascript de los 90; P
Eric Castro
99
Viejo, nuevo, antiguo o por delante. Respondió la pregunta y me ayudó. Gracias @peter.
user2060451
44
Necesitaba hacer esto por correo electrónico y funcionó. ¡Gracias! Esto realmente resuelve la pregunta, a diferencia de la respuesta aceptada.
theUtherSide
53

Podrías hacerlo en algún momento en el pasado. Pero ahora (según la última revisión del mismo estándar, que es la Recomendación del candidato) no puede.

fuddin
fuente
3
todas las demás respuestas dicen que no es posible, pero las suyas muestran que es posible, su respuesta es diferente, la estoy probando.
Amr Elgarhy
2
Lo siento, acabo de comprobar la fecha del artículo. Tiene 10 años. Por lo tanto, no hay garantía de que funcione. Si es así, por favor dímelo también.
fuddin
2
<a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a>
Probé
55
En caso de que alguien encuentre esta respuesta, el respondedor publicó una pregunta sobre esta función aquí: stackoverflow.com/questions/9884182/…
BoltClock
99
Más exacto decirlo, podrías hacerlo en algún momento en el pasado. Pero ahora (según la última revisión del mismo estándar, que es la Recomendación del candidato) no puede .
Ilya Streltsyn
34

Llego extremadamente tarde a contribuir a esto, sin embargo, me entristeció ver que nadie sugirió esto, si realmente necesita un código en línea, esto es posible. Lo necesitaba para algunos botones de desplazamiento, 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>
</a
Expandir fragmento

En este caso, el código en línea: "background-color: red;" es el color del interruptor al pasar el mouse, coloque el color que necesita allí y luego esta solución funciona. Me doy cuenta de que esta puede no ser la solución perfecta en términos de compatibilidad, sin embargo, esto funciona si es absolutamente necesario.

lukesrw
fuente
44
Gracias. Esa es una gran respuesta, creo que esta respuesta debe ser una solución.
Hovhannes Sargsyan
64
No, OP dijo que lo querían en CSS en línea dentro del atributo de estilo HTML .
jj_
3
Lo sé, jj_- sin embargo, este método le permite poner solo unas pocas líneas en el CSS y usarlo una y otra vez en muchos lugares, muchas personas (incluido yo mismo) han encontrado que esta es una alternativa útil.
lukesrw
2
esta debería ser la respuesta real, con una ligera modificación: no establezca ninguno de los colores en el estilo, solo la regla para heredar del elemento primario cuando esté suspendido, y luego configure los dos colores en línea.
Hayko Koryun
44
Esta es solo la forma "normal" de hacerlo, que todos decían que era la forma correcta. Sin embargo, no es una forma en línea, que era la solicitud original de OP.
wcndave
31

No puede hacer exactamente lo que está describiendo, ya que a:hoveres parte del selector, no las reglas CSS. Una hoja de estilo tiene dos componentes:

selector {rules}

Los estilos en línea solo tienen reglas; el selector está implícito como el elemento actual.

El selector es un lenguaje expresivo que describe un conjunto de criterios para unir elementos en un documento similar a XML.

Sin embargo, puede acercarse, porque un styleconjunto técnicamente puede ir a casi cualquier lugar:

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>
Rex M
fuente
3
En realidad, no puede: "HTML permite cualquier número de elementos STYLE en la sección HEAD de un documento". ( w3.org/TR/html4/present/styles.html#edef-STYLE )
Éric Araujo
2
Funciona en mi maquina. ¡Gracias!
Josh Habdas
@ ÉricAraujo: Luego envuelva todo este contenido bajo una <html> </html>etiqueta
fuddin
30

usando Javascript:

a) Agregar estilo en línea 

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

b) o un método un poco más difícil: agregar "mouseover"

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',''); };

Nota: los estilos de varias palabras (es decir, font-sizeen Javascript) se escriben juntos :

element.style.fontSize="12px"

T.Todua
fuente
3
Dado que esta respuesta se ha editado, ahora parece ser completamente irrelevante para la pregunta original ...
Bill
1
Wow, eso es pensar fuera de la caja ... ¡Me encanta!
theglossy1
14

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>
Expandir fragmento

Sugerencia del moderador: mantenga su separación de preocupaciones.

HTML 

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>
Expandir fragmento

JS

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}
Expandir fragmento

usuario1476842
fuente
10

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 opción es probablemente definir un bloque de estilo directamente encima del enlace que desea diseñar:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
entintado
fuente
44
Esa idea, afortunadamente, se descartará. (Ver lists.w3.org/Archives/Public/www-style/2009Jun/0341.html , en "Borradores de trabajo abandonados".)
Ms2ger
3
Hay un . falta en esta respuesta
Joel
9

Como se señaló, no puede establecer estilos en línea arbitrarios para el desplazamiento, pero puede cambiar el estilo del cursor de desplazamiento en CSS utilizando lo siguiente en la etiqueta apropiada:

style="cursor: pointer;"
rutherford
fuente
2
esa debería ser la mejor respuesta
Vladislav Guleaev
6 
<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.

Joel
fuente
2
@Derek en caso de que aún sea de interés / para cualquier otra persona que lea: "~ /" (tilde forward slash) es una referencia del lado del servidor a la raíz de la aplicación en las aplicaciones web asp.net. (La raíz de la aplicación puede ser una subcarpeta, por supuesto). Su uso aquí no hubiera sido correcto, de ahí la razón por la cual la respuesta ha sido editada desde que hizo la pregunta (sospecho).
Chris
5

Puedes hacerlo. Pero no en estilos en línea. Puedes usar onmouseovery onmouseouteventos:

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>
Expandir fragmento


fuente
4

Según sus comentarios, de todos modos está enviando un archivo JavaScript. Haz el rollover en JavaScript. El método de jQuery lo$.hover() hace fácil, al igual que cualquier otro contenedor de JavaScript. Tampoco es demasiado difícil en JavaScript directo.

Vineel Shah
fuente
Si bien esto es una
solución alternativa,
4

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

Quizás haya alguna biblioteca de 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.

m_vitaly
fuente
2

Acabo de encontrar una solución diferente.

Mi problema: tengo una <a>etiqueta alrededor de algunas diapositivas / visor de contenido principal, así como <a>etiquetas en el pie de página. Quiero que vayan al mismo lugar en IE, por lo que todo el párrafo estará subrayado 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 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 cambiar el color, pero los consejos anteriores sugieren que esto es imposible.

Solución: le di a los enlaces de pie de página dos clases diferentes, y mi problema se resolvió. Pude tener el onHovercambio de color en una clase, hacer que las diapositivas onHoverno tengan cambio de color / subrayado, ¡y aún así puedo tener los HREFS externos en el pie de página y las diapositivas al mismo tiempo!

Liz
fuente
1

Estoy de acuerdo con la sombra . Puede usar el evento onmouseovery onmouseoutpara cambiar el CSS 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 algunos visitantes sin JavaScript;) Aunque la mayor parte de la Web 2.0 funciona con JavaScript. Vea Facebook por ejemplo (mucho JavaScript) o Myspace .

Jaysn
fuente
0

Esto es bastante tarde en el juego, pero ¿cuándo usarías JavaScript en un correo electrónico HTML? Por ejemplo, en la empresa para la que trabajo actualmente (rima con Abodee), utilizamos 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. Siempre. A menos que se refiera 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 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 el desplazamiento a dispositivos móviles? Por eso me gusta la respuesta de arriba:Long answer: you shouldn't.

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

Shawn Spencer
fuente
0

Entonces, esto no es exactamente lo que el usuario estaba buscando, pero encontré esta pregunta buscando una respuesta y se me ocurrió algo relacionado. Tenía un montón de elementos repetidos que necesitaban un nuevo color / desplazamiento para una pestaña dentro de ellos. Utilizo manillares, que es clave para mi solución, pero otros lenguajes de plantillas también pueden funcionar.

Definí algunos colores y los pasé a la plantilla del manillar para cada elemento. En la parte superior de la plantilla, definí una etiqueta de estilo y puse mi clase personalizada y el color de desplazamiento.

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

Luego usé el estilo en la plantilla:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

Es posible que no necesite el !important

webhound
fuente
0

puedes escribir un código en varios tipos

primero puedo escribir esto

html

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

css

.one{
  text-decoration: none;
}

puedes intentarlo de otra manera

html

<a href="https://www.google.com/" class="one">Hello siraj</a>

css

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

también puedes intentar flotar en jquery

script java

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

html

<p>Hover the mouse pointer over this paragraph.</p>

en este código tiene una función tres en jquery primero prepara una función que es la función básica de jquery, luego tiene una función de desplazamiento en esta función cuando coloca el puntero en el texto, el color cambiará y luego el siguiente cuando sueltes el puntero al texto, será de un color diferente y esta es la tercera función

Siraj Ahmed
fuente
Evite publicar respuestas duplicadas
Simas Joneliunas
ok señor simas-joneliunas
Siraj Ahmed
Ninguno de estos enfoques resuelve el problema expresado en la pregunta. No puede usar JS en un correo electrónico con formato HTML en absoluto, y el otro enfoque que sugiere utiliza clases que se excluyen explícitamente.
Quentin
-1

Tuve que evitar JavaScript, pero podría ir con el código del lado del servidor.

así que generé una identificación, creé un bloque de estilo, generé el enlace con esa identificación. Sí, es HTML válido.

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}
<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>
Expandir fragmento

Plátano Ácido
fuente
-2

Puede usar la pseudoclase solo a:hoveren hojas de estilo externas. Por lo tanto, recomiendo usar una hoja de estilo externa. El codigo es:

a:hover {color:#FF00FF;}   /* Mouse-over link */
usuario1466310
fuente
Seguramente no necesita hojas externas, solo use la styleetiqueta.
Dmitri Zaitsev
-2

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 puedes reutilizar la clase en todas partes.

insecto
fuente
-3

Mi problema fue que estoy construyendo un sitio web que utiliza muchos íconos de imágenes que tienen que ser intercambiados por una imagen diferente al pasar el mouse (por ejemplo, las imágenes azules se vuelven rojas al pasar el mouse). 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>

Introduje un contenedor que contiene el par de imágenes. El primero es visible y el otro está oculto (pantalla: ninguno). Al pasar el cursor por el contenedor, el primero se oculta (pantalla: ninguno) y el segundo vuelve a aparecer (pantalla: bloque).

Jochem Geussens
fuente