如何微调已定义margin-left的元素？CSS/JS实现方案求助

一、CSS实现方案（推荐） #

用CSS变量存储每个元素的初始margin-left值，hover时通过calc()基于变量做动态调整，完美避开层叠覆盖问题：

.parent>div {
  width: 100px;
  height: 100px;
  background-color: black;
  /* 用变量存储初始margin-left，默认值设为0适配无预设值的元素 */
  margin-left: var(--ml, 0);
}

.elem1 {
  --ml: -100px;
}

.elem2 {
  --ml: 200px;
}

.parent>div:hover {
  /* 在元素自身初始值基础上减25px */
  margin-left: calc(var(--ml, 0) - 25px);
}

HTML无需修改，每个元素hover时都会基于自身预设的margin-left做调整，不会被统一值覆盖。

二、JavaScript修复方案 #

你之前的JS代码失效是因为event.target.style.marginLeft只能读取内联样式中的值，而你的元素样式是写在CSS类里的，所以拿到的是空值。改用getComputedStyle获取元素实际生效的样式值：

// 获取所有目标元素
const cards = document.querySelectorAll('.parent>div');
cards.forEach(card => {
  card.addEventListener("mouseover", (event) => {
    // 获取计算后的marginLeft值，转成纯数字（去除px单位）
    const currentMargin = parseInt(window.getComputedStyle(event.target).marginLeft);
    // 计算新值并设置为内联样式
    event.target.style.marginLeft = `${currentMargin - 25}px`;
  });
  // 建议添加mouseout事件恢复初始样式
  card.addEventListener("mouseout", (event) => {
    // 移除内联样式，让CSS类的预设值重新生效
    event.target.style.marginLeft = '';
  });
});

这样就能正确读取元素实际的margin-left值并做调整，加上mouseout事件可以让元素在鼠标离开后恢复初始状态。

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