无需JavaScript仅用HTML与CSS变量实现图片显隐功能异常求助

你的代码核心问题有三个：

• CSS变量存在作用域限制：你在按钮的:focus伪类内修改的CSS变量，仅对按钮本身及其子元素生效，右侧面板的图片父级a元素和按钮不在同一个子树，无法读取到修改后的变量值
• 属性值使用错误：visibility属性没有none这个有效值，合法值为visible/hidden/collapse
• :focus伪类特性限制：按钮失焦后状态会自动重置，仅在按钮保持聚焦时生效，点击页面其他位置就会恢复原样

方案1：基于:focus的临时切换方案（无需修改HTML） #

直接用同级兄弟选择器匹配右侧面板元素，不需要CSS变量，兼容支持:has()选择器的现代浏览器：

img {
    width: 200px; height: 200px; margin-left: 40px; margin-top: 30px;
}
a.c1-imgs {
    visibility: visible;
}
a.c2-imgs {
    visibility: visible;
}
#C1:focus { 
    background-color: red;
}
/* 匹配left-panel下C1聚焦后，同级right-panel内的c1-imgs元素 */
#left-panel:has(#C1:focus) + #right-panel .c1-imgs {
    visibility: hidden;
}
#C2:focus {
    background-color: red;
}
#left-panel:has(#C2:focus) + #right-panel .c2-imgs {
    visibility: hidden;
}

方案2：持久切换方案（基于:checked伪类，点击一次切换一次状态） #

不需要JavaScript，点击按钮可以持久切换图片的显隐状态，不会因为点击其他区域失效，兼容性更好。

修改后的CSS #

img {
    width: 200px; height: 200px; margin-left: 40px; margin-top: 30px;
}
/* 隐藏原生复选框 */
.toggle-check {
    display: none;
}
/* 用label模拟按钮样式 */
.lp-btn {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    margin: 4px 0;
}
.toggle-check:checked + .lp-btn {
    background-color: red;
}
/* 匹配选中状态对应的图片 */
#C1:checked ~ #right-panel .c1-imgs {
    visibility: hidden;
}
#C2:checked ~ #right-panel .c2-imgs {
    visibility: hidden;
}

修改后的HTML #

<html>
<body>
<!-- 把复选框放到公共父级最前面，方便用兄弟选择器匹配所有元素 -->
<input type="checkbox" class="toggle-check" id="C1">
<input type="checkbox" class="toggle-check" id="C2">
<div id="left-panel">
<label class="lp-btn" for="C1">SEAL 1</label><br>
<label class="lp-btn" for="C2">SEAL 2</label><br>
</div>
<div id="right-panel">
<a class="c1-imgs"><img src="https://files.worldwildlife.org/wwfcmsprod/images/HERO_harbor_seal_on_ice/hero_full/87it51b9jx_Harbor_Seal_on_Ice_close_0357_6_11_07.jpg"></a>
<a class="c2-imgs"><img src="https://www-waddensea-worldheritage-org.cdn.gofasterstripes.download/sites/default/files/styles/inline_image_full_width/public/20-11-09_habour%20seals%20report_TTF_5200.JPG?itok=YZs9c_dH"></a>
</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者William Le