4

Mi intención es que al momento de que un hipervínculo se encuentre bajo el puntero del mouse este se ponga de color naranja y cambie el tamaño del background al 100% con 1px de grosor.

No puede ir en las etiquetas <.style.> o <.link.> debido a que he leído que algunos de los servidores de email principales como Gmail eliminan estas etiquetas o no las consideran.

Como se vería si se utilizara normalmente con la etiqueta <.sytle.>:

<style> a:hover {
    color: #ffa600;
    background-size: 100% 1px;
  }
</style>

En resumen la idea es pasar ese código adentro de la etiqueta <.a.> del hipervínculo, es decir, poner css en línea (inline):

<a href="#" xxxx(supongo que aquí iría)>Enlace</a>


Gracias

3 respuestas 3

1

No es posible usar :hover cómo estilo inline porque es un pseudo-selector que únicamente tiene sentido para CSS, si se usa en una hoja de estilos.

Hay una respuesta más completa aquí en inglés https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css


Edición:

Respuesta corta: no se puede.

...

:hover es una pseudo-clase y, mediante CSS, sólo tienen sentido dentro de una hoja de estilos. No hay ningún equivalente como inline-style.

...

Ciertamente, si acaso es una opción, recuerda que agregar links a hojas de estilos externas de forma dinámica. 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>

// asumiendo que existe una etiqueta <head>

Respuesta traducida de https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css, siguiendo una recomendación en comentarios.

2
  • Esta respuesta pinta para ser muy buena y aportar una excelente solución, te invito a que traduzcas el contenido de la solución y lo anexes aquí solo dejando los créditos al autor y así todos aprendemos. :)
    – user128299
    Commented el 17 nov. 2020 a las 1:27
  • Gracias por la recomendación @BetaM lo agregaré a la respuesta previa.
    – Cajotafer
    Commented el 17 nov. 2020 a las 8:29
0

Me temo que no se puede hacer, los selectores de pseudo-clases no se pueden configurar en la etiqueta html, tendrá que hacerlo en la página o en un archivo css.

Debo mencionar que técnicamente debe ser capaz de hacerlo de acuerdo a la especificación CSS, pero la mayoría de los navegadores no lo soporta.

También puedes hacerlo de la siguiente manera y obtendrías resultados esperados imagino.

<a href="#" onmouseover="this.style.color='red';" onmouseout="this.style.color='black';">Enlace</a>

Suerte.

0

Me he dado cuenta luego de seguir leyendo en internet, que hace años atrás fue que Gmail no consideraba las etiquetas <style.> y sus reglas, sin embargo actualmente acepta ya muchas de las reglas y propiedades (sin embargo sigue sin aceptar algunas como background-size o background-position, si no me equivoco) de css.

Es decir, ahora si se produciría un cambio de color del texto del hipervínculo estando bajo el mouse si introduces el siguiente código css en la etiqueta head del html

<style>
     a:hover {color: orange}
</style>

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.