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

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