如何用CSS实现图片点击显示/隐藏切换？现有方案无效求解决

你的代码里用.cover:active触发动画的问题在于，:active伪类仅在鼠标按住元素不放时生效，松开鼠标后元素会立刻恢复初始状态，没法保持隐藏后的状态。要实现点击切换的持久状态，我们可以利用复选框（<input type="checkbox">）的:checked伪类来做状态控制，这是纯HTML/CSS实现切换效果的常用方案。

修正后的完整代码 #

CSS 部分

/* 隐藏复选框，仅用作状态开关 */
#toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cover {
  position: sticky;
  display: flex;
  align-items: flex-start;
  height: 275.25px;
  width: 275.25px;
  overflow: hidden; /* 防止内容溢出 */
  transition: height 1s linear; /* 用transition替代animation，更易控制状态切换 */
}

/* 当复选框被选中时，修改cover的高度 */
#toggle:checked ~ .cover {
  height: 0;
}

/* 把箭头设为可点击的切换按钮 */
#close {
  cursor: pointer;
  position: relative;
  z-index: 1; /* 避免箭头被隐藏 */
}

HTML 部分

<!-- 隐藏的复选框作为状态开关 -->
<input type="checkbox" id="toggle">
<!-- label绑定复选框，点击箭头就相当于点击复选框 -->
<label for="toggle" class="cover">
  <img src="./images/arrow.svg" alt="close cover" id="close">
  <img src="./images/Fiure-de-vie.jpg" alt="cover" id="cover">
</label>

关键说明 #

1. 状态开关：用隐藏的<input type="checkbox">记录切换状态，:checked伪类会在复选框被选中时保持激活状态，实现持久的切换效果。
2. 点击关联：通过<label>的for属性绑定复选框，点击箭头（或整个label区域）就会触发复选框的选中/取消选中状态。
3. 过渡动画：用transition替代animation，可以更简洁地实现状态切换时的平滑动画，同时支持正向和反向的过渡（隐藏/显示）。
4. 溢出控制：给.cover加上overflow: hidden，确保高度变为0时内部图片完全隐藏。

如果需要保留原有的<a>标签，可以把<a>放在<label>内部，但要注意如果点击图片不需要跳转，建议去掉href=""（或者设为href="javascript:void(0)"阻止默认跳转行为）。

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