Estilo en línea para actuar como: hover en CSS

90

Sé que incrustar estilos CSS directamente en las etiquetas HTML que afectan anula gran parte del propósito de CSS, pero a veces es útil para fines de depuración, como en:

<p style="font-size: 24px">asdf</p>

¿Cuál es la sintaxis para incrustar una regla como:

a:hover {text-decoration: underline;}

en el atributo de estilo de una etiqueta A? Obviamente no es esto ...

<a href="foo" style="text-decoration: underline">bar</a>

... ya que eso se aplicaría todo el tiempo, a diferencia de solo durante el desplazamiento.

html css raldi
fuente
Teóricamente, si está tratando de hacer que el hover sea algo dinámico, puede usar javascript para inyectar una regla de hover en una hoja de estilo usando la lista window.document.styleSheets de hojas existentes.
GAgnew
Véase también stackoverflow.com/questions/5293280/…
rogerdpack

Respuestas:

95

Me temo que no se puede hacer, los selectores de pseudo-clases no se pueden configurar en línea, tendrá que hacerlo en la página o en una hoja de estilo.

Debo mencionar que técnicamente se debe ser capaz de hacerlo de acuerdo a la especificación CSS , pero la mayoría de los navegadores no lo apoyo

Editar: acabo de hacer una prueba rápida con esto:

<a href="test.html" style="{color: blue; background: white} 
            :visited {color: green}
            :hover {background: yellow}
            :visited:hover {color: purple}">Test</a>

Y no funciona en IE7, IE8 beta 2, Firefox o Chrome. ¿Alguien más puede probar en otros navegadores?

Glenn Slaven
fuente
3
Es un borrador de trabajo de CSS 3 de muy baja prioridad que no se ha actualizado en seis años. De la especificación: 'No es apropiado usar los borradores de trabajo del W3C como material de referencia o citarlos como algo diferente a "trabajo en progreso". '
Jim
1
Es cierto, pero los navegadores implementan algunas reglas CSS3, probablemente debería ser la palabra incorrecta en este contexto
Glenn Slaven
Los navegadores suelen implementar funciones CSS que se encuentran en un estado de desarrollo posterior, por ejemplo, la opacidad proviene del color CSS (última llamada) y Media Queries es una recomendación candidata.
Jim
¿No sería style = ": hover {}" equivalente a "a {: hover {}}" en la hoja de estilo? Eso, obviamente, es un error de sintaxis.
Kornel
32
Esta respuesta se publicó hace mucho tiempo, las cosas han cambiado desde eso y la versión actual de la especificación W3C relevante: CSS Style Attribute Rec. ( w3.org/TR/css-style-attr/#syntax ): dice claramente que el atributo de estilo solo puede contener el contenido de un bloque de declaración CSS. Entonces ahora es imposible insertar pseudo elementos con styleatributo.
Ilya Streltsyn
24

Si solo está depurando, puede usar javascript para modificar el CSS:

<a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>
Aleksi Yrttiaho
fuente
1
Busqué una solución con JSF y esto me ayudó a solucionarlo. onmousemove = "this.style.color = '## {cc.attrs.color}';" onmouseout = "this.style.color = 'blanco';"
kdoteu
17

Una solución simple:

   <a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>

O

<script>
 /** Change the style **/
 function overStyle(object){
    object.style.color = 'orange';
    // Change some other properties ...
 }

 /** Restores the style **/
 function outStyle(object){
    object.style.color = 'orange';
    // Restore the rest ...
 }
</script>

<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>
Roberto
fuente
16

Si es para depurar, simplemente agregue una clase css para desplazarse (ya que los elementos pueden tener más de una clase):

a.hovertest:hover
{
text-decoration:underline;
}

<a href="http://example.com" class="foo bar hovertest">blah</a>
Rodrick Chapman
fuente
2
Esto es probablemente lo más cerca que vas a llegar al efecto deseado
Glenn Slaven
1

Creé una solución rápida para cualquiera que desee crear ventanas emergentes flotantes sin CSS utilizando los comportamientos onmouseover y onmouseout.

http://jsfiddle.net/Lk9w1mkv/

<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>
Josh Kernich
fuente
0

Si esa <p>etiqueta se crea a partir de JavaScript, entonces tiene otra opción: use JSS para insertar hojas de estilo mediante programación en el encabezado del documento. Soporta '&:hover'. https://cssinjs.org/

michielbdejong
fuente
-2

No creo que jQuery admita los pseudo-selectores tampoco, pero proporciona una forma rápida de agregar eventos a uno, muchos o todos sus controles y etiquetas similares en una sola página.

Lo mejor de todo es que puede encadenar los enlaces de eventos y hacerlo todo en una línea de script si lo desea. Mucho más fácil que editar manualmente todo el HTML para activarlos o desactivarlos. Por otra parte, dado que puedes hacer lo mismo en CSS, no sé si te compra algo (aparte de aprender jQuery).

CMPalmer
fuente