点击 div 区域进入链接

更新日期: 2022-05-05 阅读次数: 147 字数: 285 分类: CSS

需求

在网站的产品列表页或新闻列表页,除了能点击标题能进入详情页之外。 我还希望能点击缩略图进入详情,最好是整个子 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;
}

虽然有一点点绕,但是胜在简洁。

爱评论不评论