WordPress可展开内容卡片：悬停效果、按钮添加及设计优化求助

1. 鼠标悬停时显示描述文本（.wdg-description） #

通过CSS伪类:hover结合过渡动画实现描述文本的显示/隐藏：

/* 默认隐藏描述文本 */
.wdg-description {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, height 0.3s ease;
  margin-top: 0.5rem;
}

/* 卡片悬停时显示描述 */
.wdg-card:hover .wdg-description {
  opacity: 1;
  height: auto;
}

说明：使用height: 0和overflow: hidden避免隐藏时占用空间，opacity实现淡入效果，过渡动画让变化更自然。如果需要固定高度，可将height: auto替换为具体数值。

2. 添加仅悬停可见的按钮 #

同样利用CSS:hover控制按钮的可见性，推荐结合visibility和opacity确保无障碍性：

/* 默认隐藏按钮 */
.wdg-card-button {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border: none;
  background-color: #0073aa;
  color: #fff;
  border-radius: 4px;
}

/* 卡片悬停时显示按钮 */
.wdg-card:hover .wdg-card-button {
  opacity: 1;
  visibility: visible;
}

HTML结构示例（按钮需嵌套在卡片容器内）：

<div class="wdg-card">
  <h2 class="wdg-title">卡片标题</h2>
  <p class="wdg-description">这里是需要悬停显示的描述文本内容</p>
  <button class="wdg-card-button">操作按钮</button>
</div>

3. 设计优化建议与最佳实践 #

• 视觉一致性：统一所有卡片的尺寸、内边距、圆角、阴影样式，匹配WordPress主题的设计语言，避免风格割裂
• 响应式适配：针对移动端使用媒体查询调整卡片布局（如单列显示），增大触摸目标区域（按钮最小尺寸建议44×44px）
• 动画合理性：悬停过渡时长控制在0.2-0.3秒，避免过度动画影响性能；优先使用CSS过渡而非JS动画
• 层级与对比度：标题使用更大字号、更重字重，描述文本降低对比度（如浅灰色），按钮使用主题强调色，明确视觉层级
• 无障碍支持：使用:focus-within伪类支持键盘导航触发悬停效果，添加aria-label描述按钮功能，确保屏幕阅读器可识别内容变化
• 细节对齐：对比原型调整间距（如标题与描述、描述与按钮的间距）、颜色值、字体样式，确保像素级还原
• 性能优化：避免使用过多嵌套的DOM结构，卡片图片优先使用WebP格式并添加懒加载，减少页面加载时间

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