fix(card): 提升覆盖层 z-index 使封面图可点击跳转
封面完整图 .blur-img-full 在全局 CSS 有 z-index:1 (input.css:611), 盖在原 z-0 的覆盖层 Link 之上,导致 hover 封面命中 <img> 而非 <a>: 光标非 pointer 且点击不跳转。 将覆盖层提到 z-[2](>封面图 1,<标签 10),命中 <a> 后光标与点击一并解决, 标签 stop_propagation 与 hover 缩放不受影响。
This commit is contained in:
parent
7242c7d8f5
commit
21322a4339
@ -79,9 +79,12 @@ pub fn PostCard(post: PostListItem) -> Element {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 覆盖层链接:铺满卡片,承担整卡跳转。z-0 位于标签 (z-10) 之下。
|
// 覆盖层链接:铺满卡片,承担整卡跳转。
|
||||||
|
// z-[2] 高于封面完整图 (.blur-img-full z-index:1, input.css:611),
|
||||||
|
// 使鼠标 hover 封面时命中本 <a> 而非 <img>:光标变 pointer 且点击可跳转;
|
||||||
|
// 仍低于标签 (z-10),标签独立点击(stop_propagation)不受影响。
|
||||||
Link {
|
Link {
|
||||||
class: "absolute inset-0 z-0",
|
class: "absolute inset-0 z-[2]",
|
||||||
aria_label: "post link to {post.title}",
|
aria_label: "post link to {post.title}",
|
||||||
to: Route::PostDetail { slug: post_slug },
|
to: Route::PostDetail { slug: post_slug },
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user