无需JavaScript，如何用CSS Transition实现Div的显示与隐藏切换？

原代码用CSS animation只能完成单向隐藏，没法触发再次显示。要实现双向切换，咱们可以借助CSS的状态伪类（比如:hover、:checked）结合transition属性来实现，下面是两种可行方案：

方案1：鼠标悬停触发切换 #

适合需要鼠标交互的场景，鼠标移上去显示，移开隐藏（逻辑可反向调整）：

/* 初始状态：隐藏 */
.toggle-div {
  background-color: rgb(238, 190, 118);
  height: 200px;
  border: 2px solid rgb(255, 230, 0);
  font-size: 50px;
  text-align: center;
  opacity: 0;
  /* 给元素本身加transition，确保正反方向都有过渡 */
  transition: opacity 0.5s ease, height 0.5s ease;
}

/* 鼠标悬停时显示 */
.container:hover .toggle-div {
  opacity: 1;
  height: 200px;
}

/* 容器样式可选，用来划定hover触发区域 */
.container {
  width: 100%;
  min-height: 40px;
  border: 1px dashed #ccc;
  margin: 10px 0;
}

<div class="container">
  鼠标移到这里显示Div
  <div class="toggle-div">
    Hide Div
  </div>
</div>

方案2：点击触发切换（可保持状态） #

如果需要点击后保持显示/隐藏状态，用隐藏的复选框配合label和:checked伪类是更实用的方案：

/* 隐藏原生复选框 */
.toggle-checkbox {
  display: none;
}

/* 初始状态：隐藏Div */
.toggle-div {
  background-color: rgb(238, 190, 118);
  height: 0;
  border: 2px solid rgb(255, 230, 0);
  font-size: 50px;
  text-align: center;
  opacity: 0;
  /* 同时过渡高度和透明度，实现平滑切换 */
  transition: all 0.5s ease;
  overflow: hidden; /* 防止内容溢出 */
}

/* 复选框选中时，显示Div */
.toggle-checkbox:checked + .toggle-label + .toggle-div {
  opacity: 1;
  height: 200px;
}

/* 自定义切换按钮样式 */
.toggle-label {
  display: inline-block;
  padding: 8px 16px;
  background: #eee;
  cursor: pointer;
  border-radius: 4px;
  margin: 10px 0;
}

<input type="checkbox" id="toggle" class="toggle-checkbox">
<label for="toggle" class="toggle-label">点击切换显示/隐藏</label>
<div class="toggle-div">
  Hide Div
</div>

实用提示 #

• 如果Div内容高度不确定，把固定height换成max-height（比如初始max-height: 0，显示时max-height: 500px），避免固定高度限制内容。
• transition属性必须加在元素的初始样式里，不能只加在触发状态中，这样反向切换时也会有平滑过渡效果。
• 仅用opacity是视觉隐藏，元素仍占页面空间；如果需要完全移除占位，结合height/max-height或者visibility属性配合使用。

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