我使用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>
字符串
1条答案
按热度按时间rsl1atfo1#
我不知道为什么同一个元素有多个链接。我在tailwind playground中通过将所有className更改为class测试了这一点。看起来你想有“男人”作为覆盖在图像上,是正确的,这是唯一的领域,是一个链接。
如果是这样的话,我在这里为你修复了它:
字符串
如您所见,现在此链接只有一个a标记。希望这能帮上忙。祝你今天愉快!