1

Quería modificar el estado :focus de un elemento HTML desde la propia etiqueta HTML. Me explico, por ejemplo puedo definir los estilos en la propia etiqueta:

<div style='background: grey'>
</div>

Que en CSS sería equivalente a poner:

div {
   background: grey;
}

El problema es que no sé cómo modificar los estilos con los atributos :focus o :hover. En CSS sé que sería lo siguiente:

div:hover {
    color: white;
}

Estoy probando con:

onmouseover="this.style.boxShadow=inset 0 1px 1px #C27279;"

No consigo que se muestre el nuevo estilo.

5
  • 1
    No es posible solo con style, tendría que recurrir a eventos en JS, La mejor opción será usar CSS para este propósito. Es poco legible añadir esto en HTML y además atentas contra la Mantenibilidad, reusabilidad y escalabilidad del código.
    – Dev. Joel
    Commented el 28 may. 2017 a las 21:02
  • Te faltan comillas. Como es un valor "múltiple" (separado con espacios) tienes que ponerle comillas o fallará: onmouseover="this.style.boxShadow='inset 0 1px 1px #C27279'" funciona sin problemas (como puedes ver en este JSFiddle). Voto por cerrar la pregunta como error tipográfico.
    – Alvaro Montoro
    Commented el 29 may. 2017 a las 5:01
  • @AlvaroMontoro Gracias! Era eso, no me da exactamente el mismo resultado que :focus pero algo similar sí que es.
    – user27826
    Commented el 29 may. 2017 a las 10:56
  • Perfecto, tenía unos números mal colocados.
    – user27826
    Commented el 29 may. 2017 a las 11:02
  • @AlvaroMontoro Sin embargo, la pregunta original no era a raíz del error tipográfico. Creo que se debería de dejar abierta ya que preguntaba sobre como hacer un focus inline (cosa que es imposible solo con CSS). Commented el 29 may. 2017 a las 20:57

1 respuesta 1

0

No está permitido hacer un hover con CSS inline. Sin embargo, siempre puedes usar Javascript para lograrlo mediante onmouseover y onmouseout.

Ejemplo:

div{
   color: red;
}
<div onmouseover='this.style.color="white"' onmouseout='this.style.color="red"'>Esto es un texto</div>

6
  • Gracias por tu comentario. Estoy intentando con esto onmouseover="this.style.box-shadow=inset 0 1px 1px #C27279;,0 0 8px #C27279;" pero no me funciona.
    – user27826
    Commented el 28 may. 2017 a las 21:17
  • @JetLagFox Cuando modificas un estilo con Javascript no puedes usar guiones. Tienes que juntar las dos partes de la propiedad en una, de esta manera: this.style.boxShadow. Commented el 28 may. 2017 a las 21:20
  • Gracias por la respuesta, aunque no se refleja ningún cambio. No me da ningún error pero no modifica el estilo.
    – user27826
    Commented el 28 may. 2017 a las 21:28
  • @JetLagFox No sé si será un error tipográfico al introducirlo pero fíjate que en lo que me has puesto hay esta parte que creo que es errónea: ,0 0 8px #C27279; Commented el 28 may. 2017 a las 21:30
  • 1
    @JetLagFox ¿Puedes editar la pregunta para ver el código que tienes actualmente? Commented el 28 may. 2017 a las 22:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.