Next.js Discord

Discord Forum

Sibling Styles using onMouseEnter while still keeping component serverside

Unanswered
Egyptian Mau posted this in #help-forum
Open in Discord
Avatar
Egyptian MauOP
Most of my problems learning new Next.js has been trying my bbest to keep everything server side.

I have a component called Project. I'm rendering about 5 projects in a page. Now, onHover of one project, I want to reduce the opacity of the Sibling projects so that the one I hovered over has the focus for the user.

I've tried using the peer class from tailwind but that ONLY works on previous projects. So if I hover let's say the 3rd project, the 4th and 5th don't get the opacity: 60% applied.

I see that the only way to do this then is by using JS. So does that mean now I MUST turn my project component into client side? As I'm seeing the only way to do this is by using OnMouseEnter and onMouseLeave

10 Replies

Avatar
Egyptian MauOP
'use client'
import { useProjectContext } from "@/contexts/ProjectContext";

const Project = ({ project }: { project: ProjectType }) => {
  const { project: selectedProject, setProject: setSelectedProject } =
    useProjectContext();

  return (
    <Link
      href={project.link}
      target="_blank"
      className={`block text-inherit group no-underline cursor-pointer rounded-lg transition-all duration-200 ease-in-out ${
        selectedProject !== project.projectName &&
        selectedProject &&
        "opacity-60"
      }`}
    >
this is what i'm doing right now. creating a context and then sharing it between all siblings. but now my serverside logic is completely lost as I made the component now client side😔
@Brown bear
@Sloth bear
Avatar
Alfonsus Ardani
Most of my problems learning new Next.js has been trying my bbest to keep everything server side.
Just to keep in mind that you don't have to. Client components are as good as server component if done properly.

I want to reduce the opacity of the Sibling projects so that the one I hovered over has the focus for the user.
You can apply group hover to the whole project and override the hover effect that you currently are hovering
https://play.tailwindcss.com/qTGxyTySzv
Avatar
Brown bear
https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator
This and :has() can get you what you want, I think
Not sure how I'm tailwind
Avatar
Sloth bear
why you pinging me.
Avatar
Egyptian MauOP
Sorry my bad. Won't do unnecessary pings