使用汉堡功能时未应用 tailwind 类

Question

我正在尝试自己实现汉堡包功能，效果很好。但是当我在移动设备上测试它时，导航链接被视为普通文本。未应用顺风类，并且悬停时甚至没有链接显示在屏幕上。这是代码

//imports
const Nav = () => {
  //usestates

  const handleButtonClick = () => {
    setIsVisible(!isVisible);
  };
  //darkmode function
  const handleThemeSwitch = () => {
    setTheme(theme === "dark" ? "light" : "dark");
  };

  return (
    <header className="padding-x py-8 absolute z-10 w-full">
      <nav className="flex justify-between items-center max-container relative">
        <a href="/">
          <img src={headerLogo} alt="Logo" width={130} height={29}></img>
        </a>
        <ul
          className={`flex-1 flex max-lg:flex-col justify-center items-center  ${
            isVisible
              ? "bg-coral-red absolute top-28 left-16 w-[70%] rounded-2xl transition-all duration-1000 gap-10 flex"
              : "max-lg:hidden"
          }`}
        >
          {navLinks.map((item) => (
            <li
              key={item.label}
              className="hover:scale-105 rounded-full hover:bg-red-50 p-4 transition-all dduration-700 ease-in-out cursor-pointer pt-5"
            >
              <a
                href={item.href}
                className="font-montserrat leading-normal text-slate-gray text-xl"
              >
                {item.label}
              </a>
            </li>
          ))}
        </ul>
        <div>
          <div className="flex gap-2">
            <div
              className="p-4 lg:p-5 rounded-2xl dark:bg-gray-500 bg-gray-300 dark:lg:bg-slate-200 cursor-pointer"
              onClick={handleThemeSwitch}
            >
              {theme === "dark" ? <BsFillSunFill /> : <BsMoonStarsFill />}
            </div>

            {isVisible ? (
              <ImCross
                alt="hamburger"
                className="hidden max-lg:block h-9 w-9 pt-2"
                onClick={handleButtonClick}
              />
            ) : (
              <GiHamburgerMenu
                className="hidden max-lg:block h-9 w-9 pt-2"
                onClick={handleButtonClick}
              />
            )}
          </div>
        </div>
      </nav>
    </header>
  );
};

export default Nav;

Answer 1

我发现了问题所在。代码没问题，问题出在英雄部分。英雄部分标题有 z-10，这就是为什么当我悬停时我实际上并没有悬停在导航链接上