Next.js Discord

Discord Forum

How do I remove the browser "tab highlighting" from my element?

Unanswered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
I have a label (<p>) that appears when I hover on a link. In order to have the label transition work, I can't have it hidden from the DOM by default, how can I remove the tab highlighting and only have highlighting on the link (icon)?

I'm using Next.js, Tailwind CSS, and TypeScript for this project.

<Link
  key={index}
  href={tool.path}
  className="group relative size-[48px] select-none rounded-[16px] border border-sd-dark-grey"
  style={{ background: `radial-gradient(circle at bottom center, ${tool.color} 0%, rgba(0,0,0,0) 100%)` }}>
  <Image
    src={tool.icon}
    alt={tool.name}
  />
  <p className="pointer-events-none absolute bottom-full left-1/2 mb-[8px] w-max translate-x-[-50%] translate-y-[8px] rounded-[8px] bg-sd-black/75 px-[8px] py-[4px] text-[12px] text-sd-white opacity-0 backdrop-blur-lg transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">{tool.name}</p>
</Link>

8 Replies

Asian black bearOP
bump
Arinji
What do you want to do again @Asian black bear like a tldr
@Arinji What do you want to do again <@186252824756092929> like a tldr
Asian black bearOP
get rid of the tab highlight border (from the image) on the <p> element in my code.
In your className
Add it to the link className btw
@Arinji Add it to the link className btw
Asian black bearOP
I don't want to remove it all together though, I just want it gone from the label (<p>) element. I still want the square icon to be highlighted.
Asian black bearOP
I wouldn't be having this issue if I could make the <p> element hidden by default, but if I do that, the transition doesn't work.