CSS显示/隐藏动画失效：仅body触发有效，其他选择器无效？

• .subcontent:active 不生效的核心原因：div 属于非交互元素，默认不会响应 :active 状态（只有链接、按钮这类原生可交互元素，或设置了 tabindex 的元素才能触发该状态）。而 body:active 能生效是因为点击页面任意区域都会触发根元素 body 的激活状态。
• hover 失效的可能原因：h3 默认是 display:none，导致父元素 .subcontent 高度为 0、没有可触发 hover 的有效区域，鼠标根本无法定位到它上面。
• 额外小问题：opacity:2 无效，opacity 的合法取值范围是 0-1，超出的数值会被浏览器自动修正为 1。

根据你“按钮触发元素下滑显示”的需求，提供几种可行方案：

方案1：纯CSS实现点击切换（用复选框技巧） #

不需要JS，靠原生CSS的兄弟选择器实现点击触发：

<!-- HTML结构 -->
<label for="toggle-btn" class="trigger-btn">点击显示内容</label>
<input type="checkbox" id="toggle-btn" hidden>
<div class="subcontent">
  <h3>words here</h3>
</div>

/* CSS样式 */
.subcontent h3 {
  display: none;
  /* 添加下滑动画，贴合需求 */
  transition: all 0.3s ease;
  transform: translateY(-10px);
  opacity: 0;
}

/* 复选框选中时，显示h3并触发动画 */
#toggle-btn:checked ~ .subcontent h3 {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.trigger-btn {
  padding: 8px 16px;
  background: #eee;
  cursor: pointer;
  display: inline-block;
}

方案2：让.subcontent 可触发:active状态 #

如果一定要用 .subcontent:active 触发，给它添加 tabindex="0" 使其成为可交互元素，同时设置占位区域（避免h3隐藏时元素无尺寸）：

<div class="subcontent" tabindex="0">
  <h3>words here</h3>
</div>

.subcontent {
  /* 给父元素设置最小高度，保证有可交互区域 */
  min-height: 40px;
  border: 1px solid #ddd;
}

.subcontent h3 {
  display: none;
}

.subcontent:active h3,
.subcontent:hover h3 {
  display: block;
  opacity: 1;
}

方案3：JavaScript实现（更灵活） #

如果需要复杂交互逻辑，用JS监听点击事件是最直接的方式：

<button class="trigger-btn">点击显示内容</button>
<div class="subcontent">
  <h3>words here</h3>
</div>

.subcontent h3 {
  display: none;
  transition: all 0.3s ease;
  transform: translateY(-10px);
  opacity: 0;
}

.subcontent h3.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

const btn = document.querySelector('.trigger-btn');
const h3 = document.querySelector('.subcontent h3');

btn.addEventListener('click', () => {
  h3.classList.toggle('show');
});

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