html - mantener - hover text

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

Question

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

¿Cómo puedo usar a:hover en CSS en línea dentro del atributo de estilo HTML?

Por ejemplo, no puede usar clases CSS de forma confiable en correos electrónicos HTML.

Answer 1

1) Añadiendo 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 multi-palabra en Javascript:

element.style.fontSize="12px"

Answer 2

Acabo de descubrir una solución diferente.

Mi problema: tengo una etiqueta <a> alrededor de algunas diapositivas / visor de contenido principal, así como etiquetas <a> en el pie de página. Quiero que vayan al mismo lugar en IE, por lo que todo el párrafo se subrayará en forma onHover , aunque no sean enlaces: la diapositiva en su totalidad es un enlace. IE no sabe la diferencia. También tengo algunos enlaces reales en mi pie de página que necesitan el subrayado y el cambio de color al onHover . Pensé que tendría que poner estilos en línea con las etiquetas de pie de página para cambiar el color, pero el consejo de arriba sugiere que esto es imposible.

Solución: Le di al enlace de pie de página dos clases diferentes y mi problema se resolvió. Pude tener el cambio de color onHover en una clase, las diapositivas onHover no tienen cambio / subrayado de color, y aún puedo tener los HREFS externos en el pie de página y las diapositivas al mismo tiempo.

Answer 3

Como se señaló, no puede establecer estilos en línea arbitrarios para el desplazamiento, pero puede cambiar el estilo del cursor de desplazamiento en CSS utilizando lo siguiente en la etiqueta correspondiente:

style="cursor: pointer;"

Answer 4

De acuerdo con tus comentarios, estás enviando un archivo JavaScript de todos modos. Hacer el rollover en JavaScript. El $.hover() jQuery lo hace fácil, al igual que cualquier otro contenedor de JavaScript. No es demasiado difícil en JavaScript directo tampoco.

Answer 5

Es más exacto decirlo, w3.org/TR/2002/WD-css-style-attr-20020515 en algún momento en el pasado. Pero ahora (según la última revisión de la misma norma, que es la Recomendación del candidato) no puede ...

Answer 6

Este es el mejor ejemplo de código:

<a style="color:blue;text-decoration: underline;background: white;"   href="http://aashwin.com/index.php/education/library/"    onMouseOver="this.style.color=''#0F0''"
   onMouseOut="this.style.color=''#00F''">Library</a>

Answer 7

Esto es bastante tarde en el juego, pero ¿cuándo usarías JavaScript en un correo electrónico HTML? Por ejemplo, en la empresa en la que trabajo actualmente (rimas con Abodee), usamos el denominador común más bajo para la mayoría de las campañas de marketing por correo electrónico, y JavaScript no se está utilizando. Siempre. A menos que te refieras a algún tipo de pre-procesamiento.

Como se mencionó en una publicación relacionada: "Lotus Notes, Mozilla Thunderbird, Outlook Express y Windows Live Mail parecen admitir algún tipo de ejecución de JavaScript. Nada más lo hace".

Enlace al artículo del que se tomó: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

Además, ¿cómo se trasladaría el vuelo a los dispositivos móviles? Por eso me gusta la respuesta de arriba: Long answer: you shouldn''t.

Si alguien tiene más información sobre este tema, no dude en corregirme. Gracias.

Answer 8

Estoy de acuerdo con la sombra . Puede usar el evento onmouseover y onmouseout para cambiar el CSS través de JavaScript.

Y no digas que las personas necesitan tener JavaScript activado. Es solo un problema de estilo, por lo que no importa si hay algunos visitantes sin JavaScript;) Aunque la mayoría de la Web 2.0 funciona con JavaScript. Ver Facebook por ejemplo (un montón de JavaScript) o Myspace .

Answer 9

Estoy muy tarde contribuyendo a esto, sin embargo, me dio pena ver que nadie sugirió esto; si realmente necesita un código en línea, es posible hacerlo. Lo necesitaba para algunos botones de desplazamiento, 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 al pasar el mouse, coloque el color que necesita en ese lugar y luego esta solución funcionará. 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.

Answer 10

Las declaraciones de pseudoclases 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, su mejor apuesta es probablemente solo para 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>

Answer 11

Mi problema fue que estoy construyendo un sitio web que usa muchos íconos de imágenes que tienen que ser intercambiados por una imagen diferente al pasar el mouse (por ejemplo, las imágenes en azul se vuelven rojas). He producido la siguiente solución para esto:

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}

<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL''s).
</p>
<div class=container>
<div class=withHover style="background-image: url(''https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH'')"></div>
<div class=withoutHover style="background-image: url(''http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg'')"></div>
</div>

Introduje un contenedor que contiene el par de imágenes. La primera es visible y la otra oculta (pantalla: ninguna). Cuando se desplaza el contenedor, el primero se oculta (visualización: ninguno) y el segundo vuelve a aparecer (visualización: bloque).

Answer 12

No hay manera de hacer esto. Sus opciones son usar un JavaScript o un bloque CSS.

Tal vez haya alguna biblioteca de JavaScript que convierta un atributo de estilo propietario en un bloque de estilo. Pero entonces el código no será compatible con el estándar.

Answer 13

No puedes hacer exactamente lo que estás describiendo, 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 hacer coincidir elementos en un documento similar a XML.

Sin embargo, puede acercarse, porque técnicamente un conjunto de style puede ir a casi cualquier lugar:

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

Answer 14

Puede obtener el mismo efecto cambiando sus estilos con JavaScript en los parámetros onMouseOver y onMouseOut , 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 seguridad si this funciona en este contexto. Puede que tenga que cambiarlo con document.getElementById(''idForLink'') .

Answer 15

Puede usar la pseudo-clase a:hover en hojas de estilo externas. Por lo tanto recomiendo usar una hoja de estilo externa. El código es:

a:hover {color:#FF00FF;}   /* Mouse-over link */

Answer 16

Puedes hacer id añadiendo una clase pero nunca en línea.

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 líneas pero puedes reutilizar la clase en todas partes.

Answer 17

Respuesta corta: no puedes.

Respuesta larga: no deberías.

Asígnele un nombre de clase o una identificación y use las hojas de estilo para aplicar el estilo.

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

Respuesta a los comentarios del OP:

Consulte Totally Pwn CSS con Javascript para ver un buen script para agregar reglas CSS dinámicamente. También vea Cambiar hoja de estilo para conocer algo de la teoría sobre el tema.

Además, no olvide que puede agregar enlaces a las 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 asume que hay una sección de head .

Answer 18

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

Hover es una pseudo clase, y por lo tanto no puede aplicarse con un atributo de estilo. Es parte del selector.