需求
在网站的产品列表页或新闻列表页，除了能点击标题能进入详情页之外。 我还希望能点击缩略图进入详情，最好是整个子 item 区域都是可点击的。
在最外层套个 a 标签，既不方便布局，语义上也说不过去。
还有一种常见的，用 js 实现点击跳转，虽然逻辑清晰，但是总感觉啰嗦了点。
简洁的 inset 实现
突然想看看 tailwind 示例组件里是如何实现这种需求场景的。查了一下果然有一个示例： tailwind css 组件里的一个实现非常简洁实用。
参考:
https://tailwindui.com/components/ecommerce/components/product-lists就是将 a 标签内的一个隐藏的 span 设置成绝对定位，浮在需要触发跳转的 div 之上。
html
<div class="relative">
...
<h3 class="text-sm text-gray-700">
<a href="#">
<span aria-hidden="true" class="absolute inset-0"></span>
Basic Tee
</a>
</h3>
...
</div>
css
.inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.absolute {
position: absolute;
}
虽然有一点点绕，但是胜在简洁。
关于作者 🌱
我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式
