mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
added mix blend mode for navbar
This commit is contained in:
parent
e0440aa4ca
commit
5b6933994b
1 changed files with 3 additions and 3 deletions
|
|
@ -161,7 +161,7 @@ export const HoverNavigation = ({
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{hoveredIndex === idx && (
|
{hoveredIndex === idx && (
|
||||||
<motion.span
|
<motion.span
|
||||||
className="absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200"
|
className="absolute inset-0 z-10 block h-full w-full rounded-3xl bg-neutral-200"
|
||||||
layoutId="hoverBackground"
|
layoutId="hoverBackground"
|
||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={{
|
animate={{
|
||||||
|
|
@ -213,7 +213,7 @@ export const HoverNavigation = ({
|
||||||
<li key={item?.link}>
|
<li key={item?.link}>
|
||||||
<a
|
<a
|
||||||
href={item?.link}
|
href={item?.link}
|
||||||
className="group relative block px-5 py-2 text-center lg:hidden"
|
className="block px-5 py-2 text-center mix-blend-difference lg:hidden"
|
||||||
>
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -235,7 +235,7 @@ export const NavBarLink = ({
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"relative z-20 h-fit w-full overflow-hidden rounded-2xl text-center transition-all ease-out group-hover:text-black",
|
"relative z-20 h-fit w-full overflow-hidden rounded-2xl text-center mix-blend-difference transition-all ease-out",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue