next.js 由于绝对定位导致的铁路超高接入锚点连接- TailwindCSS

zqdjd7g9  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(113)

我使用Next.js和TailwindCSS。当我点击图片的时候,我不知怎么的不能让它打开链接。我不想一直点击标题链接,它只是一个“覆盖”。这可能是由于绝对定位。

<div className="relative group flex-1 cursor-pointer">
    <a href="/men">
        <img src="/men.jpg" className="h-full brightness-[.6] group-hover:brightness-75 duration-300" />
    </a>
    <div className="absolute inset-0 flex items-end justify-end">
        <div className="w-min">
            <a href="/men" className="ml-auto bg-dark-green w-16 h-16 text-white text-3xl flex justify-center items-center">🡕</a>
            <h2 className="py-8 px-10 text-6xl text-white font-viaoda"><a href="/men">Men</a></h2>
        </div>
    </div>
</div>

字符串

rsl1atfo

rsl1atfo1#

我不知道为什么同一个元素有多个链接。我在tailwind playground中通过将所有className更改为class测试了这一点。看起来你想有“男人”作为覆盖在图像上,是正确的,这是唯一的领域,是一个链接。
如果是这样的话,我在这里为你修复了它:

<div className="relative group flex-1 cursor-pointer">
  <a className="block" href="/men">
    <img src="//placeholder.pics/svg/200" className="h-full brightness-[.6] group-hover:brightness-75 duration-300 opacity-10" />
    <div className="absolute bottom-0 left-0 flex items-end justify-end">
      <div className="w-min">
        <div className="ml-auto bg-dark-green w-16 h-16 text-white text-3xl flex justify-center items-center">🡕</div>
        <h2 className="py-8 px-10 text-6xl text-white font-viaoda">Men</h2>
      </div>
    </div>
  </a>
</div>

字符串
如您所见,现在此链接只有一个a标记。希望这能帮上忙。祝你今天愉快!

相关问题