javascript - cursor:pointer not working for <Link> in React - Stack Overflow

admin管理员组

文章数量:1332394

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

Share Improve this question Follow asked Sep 20, 2019 at 14:54 DickensDickens 91544 gold badges1212 silver badges2727 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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>

本文标签： javascriptcursorpointer not working for ltLinkgt in ReactStack Overflow