VOOZH about

URL: https://www.geeksforgeeks.org/css/primer-css-on-hover-link/

⇱ Primer CSS On hover Link - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Primer CSS On hover Link

Last Updated : 23 Jul, 2025

Primer CSS is a free open-source CSS framework that is built upon the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is a highly reusable model.

Primer CSS offers an On hover link, that is used to turn any text color to blue when an on hover event is triggered.

Primer CSS On hover Link classes:

  • Link--onHover: This class is used to turn the text color to blue on hovering the text.

Syntax:

<a class="color-fg-muted no-underline" href="#">
 ...
 <span class="Link--onHover">...</span>
</a>

Example 1: Below example illustrates the use of Primer CSS On hover Link using Link--onHover, no-underline, and color-fg-danger classes.

Output:

👁 Image
Primer CSS On hover Link

Example 2: Below example illustrates the use of Primer CSS On hover Link using Link--onHover, no-underline, and color-fg-success classes.


Output:

👁 Image
Primer CSS On hover Link

Reference: https://primer.style/#on-hover-link

Comment