点击 div 区域进入链接

需求

在网站的产品列表页或新闻列表页，除了能点击标题能进入详情页之外。 我还希望能点击缩略图进入详情，最好是整个子 item 区域都是可点击的。

在最外层套个 a 标签，既不方便布局，语义上也说不过去。

还有一种常见的，用 js 实现点击跳转，虽然逻辑清晰，但是总感觉啰嗦了点。

简洁的 inset 实现

突然想看看 tailwind 示例组件里是如何实现这种需求场景的。查了一下果然有一个示例： tailwind css 组件里的一个实现非常简洁实用。

参考:

就是将 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 聊聊， 查看更多联系方式