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


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

Como puedo usar a:hover en CSS en línea dentro del atributo de estilo HTML?

P.ej. no puede usar clases de CSS de manera confiable en correos electrónicos HTML.


800
2018-06-23 15:07


origen


Respuestas:


Respuesta corta: no puedes.

Larga respuesta: no deberías.

Dale un nombre de clase o una identificación y usa hojas de estilo para aplicar el estilo.

:hover es un pseudo-selector y, para CSS, solo tiene significado dentro de la hoja de estilos. No hay ningún equivalente en el estilo en línea (ya que no define los criterios de selección).

Respuesta a los comentarios del OP:

Ver Totally Pwn CSS con Javascript para una buena secuencia de comandos sobre la adición de reglas CSS dinámicamente. Ver también Cambiar hoja de estilo para algunos de la teoría sobre el tema.

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


464
2018-06-23 15:09



Puede obtener el mismo efecto cambiando sus estilos con JavaScript en onMouseOver y onMouseOut parámetros, 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>

Además, no puedo recordar con certeza si this trabaja en este contexto. Es posible que deba cambiarlo con document.getElementById('idForLink').


334
2018-06-23 15:16



Más exacto decir, usted podría hacerlo en algún momento en el pasado. Pero ahora (de acuerdo con la última revisión del mismo estándar, que es la Recomendación del candidato) no se puede     ...


44
2018-03-27 05:59



Estoy muy tarde contribuyendo a esto, sin embargo, me entristeció ver que nadie sugirió esto, si realmente necesitas un código en línea, esto es posible. Lo necesitaba para algunos botones emergentes, el método es el siguiente:

.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}
<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a

En este caso, el código en línea: "background-color: red;"; es el color del interruptor en vuelo estacionario, 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.


32
2017-08-10 09:41



No puedes hacer exactamente lo que describes, ya que a:hover es parte del selector, no las reglas de CSS. Una hoja de estilo tiene dos componentes:

selector {rules}

Los estilos en línea solo tienen reglas; el selector está implícito para ser 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 style el conjunto puede ir técnicamente más a cualquier lugar:

<html>
    <style>
    #uniqueid:hover {do:something;}
    </style>
    <a id="uniqueid">hello</a>
 </html>

26
2018-06-23 15:10



1) Agregar estilo en línea usando Javascript:

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

o un método un poco más difícil:

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

2) estilos de varias palabras en Javascript:

element.style.fontSize="12px"


24
2017-07-22 08:33



Las declaraciones de pseudoclass 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, la mejor opción es, simplemente, definir un bloque de estilo directamente sobre el enlace que desea diseñar:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>

10
2018-06-23 15:11



<style>a:hover { }</style>
<a href="/">Go Home</a>

Hover es una pseudoclase y, por lo tanto, no se puede aplicar con un atributo de estilo. Es parte del selector.


4
2018-06-23 15:10



De acuerdo con sus comentarios, está enviando un archivo JavaScript de todos modos. Haz la renovación en JavaScript. jQueryes $.hover() método lo hace fácil, al igual que cualquier otro contenedor de JavaScript. No es demasiado difícil en JavaScript directo tampoco.


4
2018-06-23 15:13



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

style="cursor: pointer;"

4
2018-05-01 12:58