CSS中链接与背景联动悬停动画实现问题求助

核心问题 #

1. 兄弟选择器无效：CSS中的~选择器只能选中当前元素之后的同级元素，但你的HTML里.listhead7放在了所有链接的前面，导致hover时无法触发背景元素的动画。
2. 代码冗余：每个链接单独定义类和hover规则，维护成本高。

修正后的代码 #

HTML结构（调整背景元素位置） #

<a href="#class1" class="nav-link">Machine settings</a>
<a href="#class2" class="nav-link">Amplificator transformation</a>
<a href="#class3" class="nav-link">Shapes dimensions of sonotrode</a>
<a href="#class4" class="nav-link">Material of sonotrode</a>
<a href="#class5" class="nav-link">Amplitude regulation</a>
<a href="#class6" class="nav-link">Result</a>
<div class="background-head">Nothing</div>

CSS样式（简化+修复动画触发） #

/* 背景元素基础样式 */
.background-head {
  background-color: white;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 689px;
  /* 初始状态添加过渡，保证动画平滑 */
  transition: box-shadow 0.3s, transform 0.3s;
  transform: perspective(1px) translateZ(0);
}

/* 导航链接统一样式（包含已访问状态） */
.nav-link,
.nav-link:visited {
  text-decoration: none;
  background-color: rgb(245, 244, 255);
  display: inline-block;
  vertical-align: middle;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: box-shadow 0.3s, transform 0.3s;
  transform: perspective(1px) translateZ(0);
}

/* 链接hover动画 */
.nav-link:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  transform: perspective(1px) translateZ(0) scale(1.1);
}

/* 链接hover时触发背景元素动画 */
.nav-link:hover ~ .background-head {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  transform: perspective(1px) translateZ(0) scale(1.1);
}

关键说明 #

• 调整背景元素位置到所有链接之后，确保~选择器能正确匹配；
• 统一使用.nav-link类管理所有导航链接，减少重复代码；
• 背景元素的过渡属性必须写在初始样式中，否则hover切换时没有平滑动画；
• 链接hover时的transform需保留perspective(1px) translateZ(0)，避免覆盖3D透视效果。

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