how to achieve hover effect on phone react - css

Question

I have a code that changes another div's backgroundImage when it it is hovered over. To do this, I use onMouseOver={() => setCurrentIndex(i)} and it does the job fine for laptops. However, onMouseOver does not seem to be working on phones until I have already clicked on the image/link, making it redundant.
<Link key={post.node.title} href={`/posts/${post.node.slug}`}>
<a
onMouseOver={() => setCurrentIndex(i)}
className={`p-2 border-r-2 h-full md:p-6 lg:p-8 ${currentIndex !== i ? 'opacity-70' : 'opacity-100'}`}
>
<div className="flex flex-col items-start h-full justify-end hover:-translate-y-4 ease-in-out duration-100 ">
{post.node.categories.map((category) => (
<Link passHref key={category.name} href={`/categories/${category.name}`}>
<span className="hidden md:inline-block bg-gray-200 hover:bg-blue-100 ease-in duration-150 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
#{category.name}
</span>
</Link>
))}
<h1 className="text-xs text-gray-200 font-bold md:text-3xl">{post.node.title}</h1>
</div>
</a>
</Link>

Answer 1

You can't use hover effects on mobile since there's no cursor.
If you want visual feedback for pressing a button do a click event with a ripple effect.
Something like this Pure css ripple with minimal effort
/* Ripple effect */
.ripple {
background-position: center;
transition: background 0.8s;
}
.ripple:hover {
background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}
.ripple:active {
background-color: #6eb9f7;
background-size: 100%;
transition: background 0s;
}
/* Button style */
button {
border: none;
border-radius: 2px;
padding: 12px 18px;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
color: white;
background-color: #2196f3;
box-shadow: 0 0 4px #999;
outline: none;
}