本文教你用纯 CSS 的 :has() 选择器和隐藏复选框，实现点击卡片全屏展开、再次点击或点击其他卡片自动收起的效果，零 JS、适合 HTML/CSS 新手。
本文教你用纯 CSS 的 `:has()` 选择器和隐藏复选框，实现点击卡片全屏展开、再次点击或点击其他卡片自动收起的效果，零 JS、适合 HTML/CSS 新手。
要实现“点击卡片 → 全宽展开并显示更多内容 → 再次点击或点击其他卡片 → 自动收起”，你完全不需要写 JavaScript！现代 CSS 提供了简洁可靠的纯 CSS 方案：利用 <input type="checkbox"> 作为状态开关 + :has() 伪类精准控制样式，既易懂又健壮。
✅ 核心思路（新手友好版）
- 把一个隐藏的复选框（
<input type="checkbox" hidden>）放在卡片内部； - 用
<label></label>包裹整个.game-list，并设置for="id"关联复选框 —— 这样点击卡片任意位置都会触发勾选/取消； - 使用
:has(input:checked)选择器，当该复选框被选中时，向上查找父容器.games，再定位到当前.game-list并应用全屏样式； - 展开时覆盖默认尺寸，同时可自由添加额外文本（如详情描述），默认隐藏，仅在展开时显示。
? 完整可运行代码（已优化结构与可读性）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>卡片点击展开教程</title>
<style>
.games {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
margin: 0;
padding: 20px;
min-height: 100vh;
background: #1a1a2e;
}
/* ? 关键：当 games 容器内有被勾选的 checkbox 时，让对应 game-list 全屏 */
.games:has(.game-list input:checked) .game-list {
width: 100vw !important;
height: 100vh !important;
margin: 0 !important;
border-radius: 0 !important;
z-index: 100;
transition: all 0.4s ease;
}
.game-list {
position: relative;
margin: 30px;
padding: 20px;
width: 325px;
height: 275px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 75, 255, 0.1);
box-shadow: 0 8px 40px 0 rgba(45, 57, 231, 0.37);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease;
cursor: pointer;
}
.game-list:hover:not(:has(input:checked)) {
transform: scale(1.05);
}
/* ? 隐藏复选框，但保留其功能 */
.game-list input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* ? 默认隐藏的详情文本（仅在展开时显示） */
.game-list .details {
display: none;
color: white;
font-size: 18px;
line-height: 1.6;
text-align: center;
margin-top: 16px;
padding: 0 20px;
}
/* ? 展开状态下显示详情 */
.game-list:has(input:checked) .details {
display: block;
animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ? 图片与标题保持居中 */
.game-list img {
width: 140px;
height: 140px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 12px;
}
.game-list h1,
.game-list p {
color: white;
margin: 8px 0;
text-align: center;
}
.game-list p {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<div class="games">
<!-- 卡片 1 -->
<label for="card1">
<div class="game-list">
<input type="checkbox" id="card1">
<img src="https://rideawavedesign.com/wp-content/uploads/2021/06/dnd-dice-level-up-birthday-card-1.jpg" alt="D&D Card">
<h1>Chapter 1:</h1>
<p>Step-by-Step</p>
<div class="details">
<p>Welcome to your first adventure! This chapter guides you through character creation, basic rules, and how to roll your first d20.</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill7377" title="Java Maven Secondary Analysis"><img
src="https://img.php.cn/upload/skill/000/000/081/179144831942131.jpg" alt="Java Maven Secondary Analysis" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill7377" title="Java Maven Secondary Analysis">Java Maven Secondary Analysis</a>
<p>分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。</p>
</div>
<a href="/xiazai/skill7377" title="Java Maven Secondary Analysis" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>Tip: Press ESC or click anywhere outside the card to close it quickly.</p>
</div>
</div>
</label>
<!-- 卡片 2（示例：支持多卡片互斥） -->
<label for="card2">
<div class="game-list">
<input type="checkbox" id="card2">
<img src="https://via.placeholder.com/140/4a90e2/ffffff?text=Game+2" alt="Game 2">
<h1>Chapter 2:</h1>
<p>Combat Basics</p>
<div class="details">
<p>Learn action economy, attack rolls, saving throws, and how to use advantage/disadvantage in real-time play.</p>
</div>
</div>
</label>
</div>
</body>
</html>⚠️ 注意事项 & 小贴士
-
浏览器兼容性：
:has()在 Chrome 105+、Edge 105+、Firefox 121+ 和 Safari 15.4+ 中已全面支持；若需兼容更老版本，后续可平滑过渡为 JavaScript 方案（本文暂不展开）。 -
互斥逻辑说明：本方案天然支持“点击新卡片 → 原卡片自动收起”，因为每个
<label></label>只控制自己的<input>，而.games:has(...)规则只匹配当前被勾选的卡片 —— 其他未勾选的卡片不会触发全屏样式。 -
无障碍友好：使用
<label></label>包裹确保屏幕阅读器可识别点击区域，且input保留在 DOM 中，语义正确。 -
自定义建议：
- 修改
width: 100vw和height: 100vh为95vw/90vh可留出边距； - 添加
position: fixed和top: 0; left: 0;让展开更稳定； - 用
:focus-within或 ESC 键关闭？—— 这就需要少量 JS，但当前纯 CSS 已满足核心需求。
- 修改
掌握这个模式后，你不仅能实现卡片展开，还能迁移到 FAQ 折叠、导航菜单切换等场景。CSS 正变得越来越强大——而你，已经迈出了关键一步。
