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

zqdjd7g9 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(120)

我使用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>

字符串

next.js

来源：https://stackoverflow.com/questions/76831675/cant-access-anchor-link-due-to-absolute-positioning-tailwindcss

1条答案

按热度按时间

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标记。希望这能帮上忙。祝你今天愉快！

赞(0）回复(0）举报 2023-08-04

我来回答

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

1条答案

相关问题

热门标签

最新问答