Primer CSS es un marco CSS gratuito de código abierto que se basa en el sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de Github. Crea la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. Es un modelo altamente reutilizable.
Primer CSS ofrece un enlace On hover, que se utiliza para convertir cualquier color de texto en azul cuando se activa un evento on hover.
Primer CSS Clases de enlaces flotantes:
- Link–onHover: esta clase se usa para cambiar el color del texto a azul al pasar el cursor por encima del texto.
Sintaxis:
<a class="color-fg-muted no-underline" href="#">
...
<span class="Link--onHover">...</span>
</a>
Ejemplo 1: El siguiente ejemplo ilustra el uso de Primer CSS On hover Link usando las clases Link–onHover, no-underline y color-fg-danger .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Links On hover</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Links On hover</h3> <a class="color-fg-danger no-underline" href="www.geeksforgeeks.org"> GeeksforGeeks <span class="Link--onHover"> This part becomes blue and underlyned on hover. </span> </a> </center> </body> </html>
Producción:
Primer CSS en enlace flotante
Ejemplo 2: El siguiente ejemplo ilustra el uso de Primer CSS On hover Link usando las clases Link–onHover, no-underline y color-fg-success .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Links On hover</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Links On hover</h3> <a class="color-fg-success no-underline" href="www.geeksforgeeks.org"> GeeksforGeeks, is an computer Science portal. <span class="Link--onHover"> I become underline-blue on hover. </span> </a> </center> </body> </html>
Producción:
Primer CSS en enlace flotante
Referencia: https://primer.style/css/components/links#on-hover-link
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA