this is my code
import Link from 'next/link'

const NavBar = () => {

return (

#Unknown Channel
<header className=' font-mono text-right overflow-x-hidden'>
<div>
<h1 className=' md:flex md:translate-x-[1rem] align-start justify-start font-serif translate-x-[-17rem] text-2xl lg:translate-x-[-80rem]text-3xl translate-y-[4rem] lg:text-3xl hover: cursor-pointer'>Eng Records</h1>
</div>
<nav className=' flex items-end justify-end mt-10 '>
<div className=' hover:text-gray-500 active:text-gray-800'>
<Link href="./About" className='mr-6 hover:text-gray-500 active:text-gray-800'>Home</Link>
</div>
<div className='mr-6 hover:text-gray-500 active:text-gray-800'>
<Link href="#">About</Link>
</div>
<div className='mr-6 hover:text-gray-500 active:text-gray-800' id="hit">
<Link href="#" className=''>Contact</Link>
</div>
<div className='mr-1 hover:text-gray-500 active:text-gray-800 '>
<Link href="#">Hits</Link>
</div>

</nav>
</header>
</>
)
}

export default NavBar

when i hover over the link the hover animation wont happen