Primer CSS On hover Link

Last Updated : 19 Apr, 2022

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.

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>

Output:

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.

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>