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
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

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
This and :has() can get you what you want, I think
Not sure how I'm tailwind
@Egyptian Mau <@1276154564982210683>
Sloth bear
why you pinging me.
Egyptian MauOP
Sorry my bad. Won't do unnecessary pings