本文教你使用纯 css（无需 javascript）实现卡片点击全屏展开、再次点击收起，并支持多卡片互斥切换，适合 html/css 新手入门。
本文教你使用纯 css（无需 javascript）实现卡片点击全屏展开、再次点击收起，并支持多卡片互斥切换，适合 html/css 新手入门。
要实现“点击卡片全宽展开 + 显示隐藏文本 + 再次点击收起 + 多卡片互斥”，最简洁、零 JS 的方案是利用现代 CSS 的 :has() 伪类配合隐藏 <input type="checkbox"> 控制状态。下面分步详解：
✅ 核心思路（新手友好版）
- 每个
.game-list卡片外层包裹一个<label></label>，关联一个隐藏的复选框（<input type="checkbox" hidden>）； - 利用
label的点击自动触发 checkbox 切换的特性，无需写 JS； - 使用
:has(input:checked)在父容器.games上监听任意子 checkbox 是否被选中，从而控制对应卡片样式； - 展开时设置
width: 100vw; height: 100vh;覆盖视口，并添加z-index确保层级最高； - 隐藏文本可通过
<div class="hidden-text"> 添加，并在展开时设为 <code>display: block;。✅ 完整可运行代码（已优化兼容性与可读性）
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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; } /* ? 关键：当任一子 checkbox 被勾选时，让该卡片全屏 */ .games:has(.game-list input:checked) .game-list { width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 40px; z-index: 1000; position: relative; transition: all 0.4s ease; } .game-list { margin: 30px; padding: 20px; height: 275px; width: 325px; 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; transition: transform 0.3s ease, background 0.3s ease; position: relative; overflow: hidden; } .game-list:hover:not(:has(input:checked)) { transform: scale(1.05); } /* ? 隐藏文本：默认不显示，仅在展开时出现 */ .hidden-text { display: none; color: #fff; font-size: 18px; line-height: 1.6; margin-top: 20px; text-align: center; max-width: 80%; } /* ? 展开状态下显示隐藏文本 */ .game-list input:checked ~ .hidden-text { display: block; animation: fadeIn 0.5s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ? 隐藏复选框本身（只保留 label 可点击区域） */ .game-list input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* ? 点击区域扩大到整个卡片（提升体验） */ .game-list label { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; } </style><div class="games"> <!-- 卡片 1 --> <div class="game-list"> <input type="checkbox" id="card1"><label for="card1"></label> @@##@@ <h1 style="color:#FFFFFF; margin:12px 0 6px;">Chapter 1:</h1> <p style="color:#FFFFFF; font-size: 20px;">Step-by-Step</p> <div class="hidden-text"> <p>Welcome to your first interactive tutorial! Click anywhere on this card to expand it fully.</p> <p>You’ll see more details here — and clicking again (or on another card) will close it.</p> </div> </div> <!-- 卡片 2（演示多卡片互斥） --> <div class="game-list"> <input type="checkbox" id="card2"><label for="card2"></label> @@##@@ <h1 style="color:#FFFFFF; margin:12px 0 6px;">Chapter 2:</h1> <p style="color:#FFFFFF; font-size: 20px;">Advanced Tips</p> <div class="hidden-text"> <p>This is the second card. Try clicking it — the first one will automatically collapse.</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>No JavaScript needed: pure CSS magic with <code>:has()</code> and checkboxes!</p> </div> </div> </div>⚠️ 注意事项 & 小贴士
- ✅ 浏览器支持：
:has()在 Chrome 105+、Firefox 120+、Safari 15.4+ 中已稳定支持；如需兼容旧版浏览器，后续可补充 JS 方案（但本教程专注「零 JS 入门」）； - ✅ 互斥逻辑：因每个 checkbox 独立，且
:has(input:checked)是「父级监听任意子项」，所以点击新卡片时，旧卡片不会自动取消勾选 → 需手动添加 JS 或改用 radio（单选）。本例推荐改用<input type="radio" name="card-group">替代 checkbox，即可天然互斥（只需将id和name统一即可）； - ✅ 移动端适配：
100vw/100vh在 iOS Safari 中可能有安全区问题，生产环境建议加@supports (padding: max(0px))做渐进增强； - ✅ 无障碍友好：
<label></label>包裹整个卡片，语义清晰，屏幕阅读器可识别为可点击区域。
掌握这个模式后，你就能轻松构建 FAQ 折叠面板、作品集详情页、交互式教程等——全是纯 CSS，干净、高效、易维护。继续加油，两天就写出这么棒的布局，你已经走在正确的路上了！ ?
- ✅ 浏览器支持：
