CSS动画：悬停时元素移至兄弟元素，求非固定定位值实现方案

嘿，这个需求我太懂了！固定width和left确实不够灵活，尤其是导航项长度不一样或者响应式场景下，给你分享两个实用的方案，不用写死定位值就能实现你要的兄弟元素覆盖效果：

方案一：JavaScript动态获取元素尺寸与位置（兼容性最好） #

这个方法通过监听鼠标悬停事件，实时获取目标导航项的实际位置和宽度，再把这些值传给动画元素，完全不用提前写死任何固定值。

示例代码 #

HTML结构

<nav>
  <a href="#" class="nav-item">首页</a>
  <a href="#" class="nav-item">产品中心</a>
  <a href="#" class="nav-item">关于我们</a>
  <a href="#" class="nav-item">联系客服</a>
  <div class="animation"></div>
</nav>

CSS样式（保留你的基础逻辑，去掉固定width/left）

nav {
  position: relative; /* 给动画元素提供定位参考 */
  display: flex;
  gap: 24px;
  padding: 0 30px;
  height: 60px;
  align-items: center;
  background-color: #f8f9fa;
}

.nav-item {
  position: relative;
  z-index: 1; /* 确保导航文字始终在动画层上方 */
  text-decoration: none;
  color: #212529;
  font-size: 16px;
}

nav .animation {
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 0;
  transition: all .5s ease 0s;
  background-color: #e9ecef; /* 替换成你想要的高亮背景 */
  /* 移除固定的width和left属性 */
}

JavaScript逻辑

// 获取动画元素和所有导航项
const animationEl = document.querySelector('.animation');
const navItems = document.querySelectorAll('.nav-item');

// 给每个导航项绑定悬停事件
navItems.forEach(item => {
  item.addEventListener('mouseover', () => {
    // 获取当前导航项相对于视口的位置信息
    const itemRect = item.getBoundingClientRect();
    // 获取导航容器的位置信息，用来计算相对偏移
    const navRect = item.parentElement.getBoundingClientRect();
    
    // 计算动画元素需要的left和width值
    const relativeLeft = itemRect.left - navRect.left;
    const itemWidth = itemRect.width;
    
    // 应用到动画元素上
    animationEl.style.left = `${relativeLeft}px`;
    animationEl.style.width = `${itemWidth}px`;
  });
});

// 可选：鼠标离开导航容器时重置动画元素（按需选择）
document.querySelector('nav').addEventListener('mouseleave', () => {
  animationEl.style.left = '0';
  animationEl.style.width = '0';
});

优点 #

• 兼容性拉满，所有现代浏览器甚至旧版浏览器都能支持
• 完全自适应导航项的动态尺寸（比如文字长度变化、响应式换行前的调整）

方案二：CSS :has() 选择器 + 预定义变量（极简方案，需现代浏览器） #

如果你的项目只需要兼容现代浏览器，可以用CSS :has()选择器配合JS初始化变量，实现几乎无JS的效果（仅初始化时获取一次尺寸）。

示例代码 #

初始化JS（仅页面加载时执行一次）

const navItems = document.querySelectorAll('.nav-item');
navItems.forEach((item, index) => {
  const rect = item.getBoundingClientRect();
  // 给每个导航项设置自定义CSS变量，存储宽度和相对位置
  item.style.setProperty('--item-left', `${rect.left - item.parentElement.getBoundingClientRect().left}px`);
  item.style.setProperty('--item-width', `${rect.width}px`);
});

CSS样式（核心利用:has()触发动画）

nav {
  position: relative;
  display: flex;
  gap: 24px;
  padding: 0 30px;
  height: 60px;
  align-items: center;
  background-color: #f8f9fa;
}

.nav-item {
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: #212529;
}

nav .animation {
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 0;
  transition: all .5s ease 0s;
  background-color: #e9ecef;
  left: 0;
  width: 0;
}

/* 当导航容器包含悬停的.nav-item时，设置动画元素的位置和宽度 */
nav:has(.nav-item:nth-child(1):hover) .animation {
  left: var(--item-left);
  width: var(--item-width);
}

nav:has(.nav-item:nth-child(2):hover) .animation {
  left: var(--item-left);
  width: var(--item-width);
}

/* 依次给每个导航项对应:nth-child(n)的规则 */

优点 #

• 交互逻辑几乎都在CSS里，代码更简洁
• 动画过渡依然丝滑

注意事项 #

• :has()选择器目前仅支持Chrome 105+、Firefox 121+、Safari 15.4+，如果需要兼容旧版浏览器还是优先方案一

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