Having trouble implementing a hover effect on my navigation links using the Link component from the react-scroll library. The desired effect is for the links to increase in size when hovered over by using transform: scale(1.1). Unfortunately, the effect is not working as expected. When I tried using regular div elements instead of Link tags, the effect worked perfectly. It seems like there might be a conflict with the react-scroll library.
Below is the code snippet:
JSX:
import React from "react";
import { Link, Element, Events, animateScroll as scroll, scrollSpy, scroller } from "react-scroll";
import "../App.css";
function Navbar() {
return (
<Link
activeClass="active"
to="about"
spy={true}
smooth={true}
offset={-100}
duration={500}
className="navbar-item"
>
Hover over me to make me grow, click me to scroll down
</Link>
);
}
export default Navbar;
CSS:
.navbar-item {
transition: all 0.3s ease;
}
.navbar-item:hover {
transform: scale(1.1);
}
Any assistance in resolving this issue would be greatly appreciated. Thank you!