html - texto - Estilo en línea para actuar como: hover en CSS

selector de hijos css

Question

Sé que incrustar estilos CSS directamente en las etiquetas HTML que afectan derrota 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, en lugar de solo durante el vuelo estacionario.

Answer 1

Junté una solución rápida para todos los que quieran crear ventanas emergentes 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>

Answer 2

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

Debo mencionar que técnicamente deberías poder hacerlo de acuerdo con las especificaciones de CSS , pero la mayoría de los navegadores no lo admiten

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?

Answer 3

No creo que jQuery también sea compatible con los pseudo selectores, pero proporciona una manera 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 evento y hacerlo todo en una línea de script si lo desea. Mucho más fácil que editar manualmente todo el HTML para activarlo o desactivarlo. Por otra parte, dado que puedes hacer lo mismo en CSS, no sé si te compra algo (aparte de aprender jQuery).

Answer 4

Si se trata de depurar, simplemente agrega 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>

Answer 5

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

<a onmouseover="this.style.textDecoration=''underline'';"
onmouseout="this.style.textDecoration=''none'';">bar</a>

Answer 6

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>