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;
}
Share
Improve this question
asked Sep 20, 2019 at 14:54
DickensDickens
9154 gold badges12 silver badges27 bronze badges
1 Answer
Reset to default 6className
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>