I am new to React and wanted to add cursor:pointer on react router Link hover in React. I am using CSS modules and basically did everything right but still pointer does not appear on hover. Here is the code I am using:

 <Link className={styles.title} to="/">
              <h2>
                <i className="fa fa-sun-o "></i>
                {title}
              </h2>
            </Link>

The code in CSS file
    .title,
    .title:hover,
    .title:active,
    .title:visited,
    .title:focus {
      text-decoration: none;
      cursor: pointer;
      color: blue;
    }

I am new to React and wanted to add cursor:pointer on react router Link hover in React. I am using CSS modules and basically did everything right but still pointer does not appear on hover. Here is the code I am using:

 <Link className={styles.title} to="/">
              <h2>
                <i className="fa fa-sun-o "></i>
                {title}
              </h2>
            </Link>

The code in CSS file
    .title,
    .title:hover,
    .title:active,
    .title:visited,
    .title:focus {
      text-decoration: none;
      cursor: pointer;
      color: blue;
    }

• javascript
• reactjs

1 Answer 1

className should be applied to Link's children or a wrapper. Link doesn't accept className prop

<Link to="/">
    <h2 className={styles.title}>
        <i className="fa fa-sun-o "></i>
        {title}
    </h2>
</Link>