实现与参考站点一致的手风琴hover效果，且展开内容区与头部同色

问题1：头部hover交互异常 #

问题根源 #

• 错误的hover逻辑：现有代码给.research-group-header设置了opacity: 0.2，hover时整个头部会变为近乎透明的状态，完全不符合参考的交互反馈
• 样式挂载错位：头部背景色写在内层h3标签上，而非外层.research-group-header容器，导致hover时无法统一控制整个头部的视觉变化

修复代码 #

删除原有.research-group-header:hover { opacity: 0.2; }代码，替换为以下样式：

/* hover时头部背景加深、文字反色 */
.sec .research-group .research-group-header:hover h3 {
  background-color: #b8b8b8;
  color: #ffffff;
}
/* 同步hover状态的图标颜色 */
.sec .research-group .research-group-header:hover span {
  color: #ffffff;
}

问题2：展开内容与头部颜色不一致 #

问题根源 #

.research-group-body未配置背景色，默认继承页面白色背景，和头部的浅灰背景形成明显色差，不符合整体视觉逻辑

修复代码 #

给内容区域新增同色系背景配置，原有样式保留：

.sec .research-group .research-group-body {
  /* 新增背景色，可直接用#d8d8d8和头部完全统一，或用#f0f0f0形成浅层级区分 */
  background-color: #f0f0f0;
  padding:20px;
  display: none;
}

结构优化建议 #

把头部背景色从h3移到外层.research-group-header上，避免样式割裂：

/* 调整h3样式，移除原有background配置 */
.sec .research-group .research-group-header h3{
  cursor: pointer;
  color:  #422b31;
  position: relative;
  margin:0;
  padding:15px 20px;
  font-weight: 500;
  font-size: 20px;
}
/* 给外层header新增背景 */
.sec .research-group .research-group-header {
  position: relative;
  background-color: #d8d8d8;
}

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