如何仅用CSS实现点击箭头后控制覆盖层Div向上滑出？

当然可以用纯CSS实现！你遇到的问题是纯CSS本身没有原生的click事件监听，但我们可以借助隐藏复选框+标签关联的技巧来模拟点击交互，完全不需要JavaScript。下面是具体的实现方案：

核心思路 #

我们会添加一个隐藏的复选框，把你的箭头元素改成<label>标签并关联这个复选框。当点击箭头（也就是点击标签）时，复选框的checked状态会切换，然后我们利用CSS的:checked伪类来控制control-overlay的显示/隐藏，结合你已经写好的transition实现平滑滑出效果。

修改后的完整代码 #

HTML部分

我们添加了隐藏的复选框，并把.arrow改成<label>，绑定复选框的id：

<div class="music-container">
  <div class="playing-now"></div>
  <div class="playing-time">
    <div class="time">
      <span class="time-left">0:24</span>
      <span class="time-right">-2:19</span>
    </div>
  </div>
  <!-- 新增隐藏复选框 -->
  <input type="checkbox" id="toggleOverlay" class="toggle-checkbox">
  <!-- 将箭头改为label，关联复选框 -->
  <label for="toggleOverlay" class="arrow">
    <div class="left-side-arrow"></div>
    <div class="right-side-arrow"></div>
  </label>
  <div class="control-overlay">
    <p>controls here</p>
    <br/>
    <p>controls here</p>
  </div>
</div>

CSS部分

添加隐藏复选框的样式，然后修改.control-overlay的状态控制逻辑，去掉原来的.closed类，改用:checked伪类来切换：

html, body { 
  height: 100%; 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  background-color:black;
} 

.music-container { 
  width:555px; 
  height:400px; 
  background-color:white; 
  border: 1px solid white; 
  border-radius:5px; 
  box-shadow: 0px 15px 54px -12px rgba(94,97,120,1); 
  position: absolute; 
  top:0; bottom: 0; left: 0; right: 0; 
  margin: auto;
  /* 新增：让容器成为定位上下文，避免控制层溢出 */
  overflow: hidden;
} 

.playing-now { 
  width:180px; 
  height:175px; 
  border: 1px solid transparent; 
  border-radius:5px; 
  background-size:cover; 
  position: absolute; 
  top:0; bottom: 130px; left: 0; right: 0; 
  margin: auto;
} 

.playing-now:hover { 
  transform:scale(1.01); 
  cursor:pointer;
} 

.current-time { 
  position: absolute; 
  top:120px; bottom: 0; left: 0; right: 0; 
  margin: auto;
} 

.music-bar { 
  padding: 0 3rem;
} 

progress { 
  border: 0; 
  color: #ED5483; 
  height: 5px; 
  width: 45%; 
  -webkit-appearance: none;
} 

progress::-webkit-progress-value { 
  background: #7f7f7f; 
  border-radius: 10px;
} 

progress::-webkit-progress-bar { 
  height: 2.7px; 
  background: #d8d8d8; 
  border-radius: 10px;
} 

.progress-dot { 
  width:4.5px; 
  height:4.5px; 
  border: 1px solid #7f7f7f; 
  background-color:#7f7f7f; 
  border-radius:50%; 
  position: absolute; 
  top:0; bottom: -117.5px; left: 0; right: 165px; 
  margin: auto;
} 

.playing-bar:hover { 
  cursor:pointer;
} 

.time { 
  margin-top:265px; 
  font-family:Helvetica, sans-serif; 
  font-size:13px; 
  color:#7f7f7f;
} 

.time-left { 
  float:left; 
  margin-left:138px;
} 

.time-right { 
  float:right; 
  margin-right:138px;
} 

.song-name { 
  position: absolute; 
  text-align:center; 
  top:305px; bottom: 0; left: 0; right: 0; 
  margin: auto; 
  font-weight:bold; 
  font-family:Helvetica, sans-serif;
} 

.artist { 
  position: absolute; 
  text-align:center; 
  top:330px; bottom: 0; left: 0; color:red; right: 0; 
  margin: auto; 
  font-family:Helvetica, sans-serif;
} 

/* 新增：隐藏复选框 */
.toggle-checkbox {
  display: none;
}

.arrow { 
  transform: scale(0.9); 
  position: absolute; 
  top: 375px; bottom: 0; left: 0; width:55px; right: 0; 
  margin: auto;
} 

.arrow:hover { 
  cursor:pointer; 
  transform: scale(1); 
  left:2px;
} 

.left-side-arrow { 
  transform: rotate(-19deg); 
  width:15px; 
  height:3px; 
  background-color:#d8d8d8; 
  border-radius:7px; 
  position: absolute; 
  top:0; bottom: 0; left: 0px; right: 12px; 
  margin: auto;
} 

.right-side-arrow { 
  transform: rotate(-340deg); 
  width:15px; 
  height:3px; 
  background-color:#d8d8d8; 
  border-radius:7px; 
  position: absolute; 
  top:0.5px; bottom: 0; left: 13.5px; right: 0; 
  margin: auto;
} 

.control-overlay { 
  width:550px; 
  max-height:0; /* 默认收起状态 */
  background-color:rgba(0,255,255,0.5); 
  overflow-y: hidden; 
  transition: max-height .5s cubic-bezier(0, 1, 0.5, 1); 
  border: 1px solid transparent; 
  border-radius:5px; 
  position:absolute; 
  bottom: 0; left: 0; right: 0; 
  margin: auto;
  padding: 0 10px; /* 添加上下内边距，避免内容紧贴边缘 */
  box-sizing: border-box; /* 确保内边距不影响宽度 */
} 

/* 当复选框被选中时，展开控制层 */
.toggle-checkbox:checked ~ .control-overlay {
  max-height: 119px;
  padding: 10px; /* 展开时显示内边距 */
}

关键修改点说明 #

1. 隐藏复选框：添加display: none的复选框，用来存储点击状态，用户看不到但可以通过标签触发。
2. 箭头改为标签：把.arrow从<div>改成<label>，通过for属性关联复选框，点击箭头就相当于点击复选框。
3. 控制层状态切换：默认max-height: 0收起，当复选框:checked时，设置max-height: 119px展开，结合transition实现平滑动画。
4. 容器添加overflow:hidden：避免控制层展开时超出音乐容器的范围，保持布局整洁。
5. 调整内边距：给控制层添加上下内边距，让内容不会紧贴边缘，提升视觉效果。

这样就能完全用纯CSS实现你想要的点击箭头滑出/收起控制层的效果啦！

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