按钮:after伪元素无法跟随鼠标移动的问题求助

你遇到的核心问题有两个：一是getComputedStyle返回的是只读的样式对象，没法直接修改它的属性值；二是你用了==比较运算符而非赋值操作，这导致伪元素的位置根本没被更新。另外，伪元素本身不是真实DOM节点，没法直接通过JS操作它的样式，得换个思路来实现。

解决方案：用CSS变量间接控制伪元素位置 #

我们可以通过CSS自定义属性（变量）作为中间层，让JS修改按钮元素上的变量，伪元素自动读取这些变量值来更新位置。以下是修改后的完整代码：

1. 调整CSS代码，引入变量控制伪元素位置

.main { 
  width:100vw; 
  height:100vh; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
} 
.button { 
  padding:32px; 
  background-color:green; 
  color:white; 
  position:relative;
  /* 定义控制伪元素位置的变量，设置初始值 */
  --pseudo-top: 10px;
  --pseudo-left: 10px;
  /* 确保文字在伪元素上方 */
  z-index: 1;
  &:after { 
    content:''; 
    display: block; 
    height:100%; 
    width:100%; 
    position:absolute; 
    left: var(--pseudo-left); 
    top: var(--pseudo-top); 
    background-color:yellow;
    z-index: -1;
  } 
}

2. 修改JS代码，计算鼠标相对位置并更新变量

const btn = document.querySelector('.button'); 

btn.addEventListener("mousemove", function( e ) { 
  // 获取按钮相对于视口的位置，计算鼠标在按钮内部的坐标
  const btnRect = btn.getBoundingClientRect();
  const relativeX = e.clientX - btnRect.left;
  const relativeY = e.clientY - btnRect.top;
  
  // 调整偏移量，让黄色背景中心跟随鼠标（可根据需求修改）
  const offsetX = relativeX - btn.offsetWidth / 2;
  const offsetY = relativeY - btn.offsetHeight / 2;
  
  // 更新CSS变量，伪元素会自动应用新位置
  btn.style.setProperty('--pseudo-left', `${offsetX}px`);
  btn.style.setProperty('--pseudo-top', `${offsetY}px`);
});

// 可选：鼠标离开按钮时，让伪元素回到初始位置
btn.addEventListener("mouseleave", function() {
  btn.style.setProperty('--pseudo-left', '10px');
  btn.style.setProperty('--pseudo-top', '10px');
});

关键思路说明 #

• CSS变量的作用：伪元素无法被JS直接选中，通过给父元素绑定变量，伪元素读取变量值，实现了JS对伪元素样式的间接控制。
• 相对坐标计算：用getBoundingClientRect()获取按钮的视口位置，计算鼠标在按钮内部的相对坐标，避免了全局坐标带来的偏移问题，移动更精准。
• 层级控制：给按钮加z-index:1，伪元素加z-index:-1，确保按钮文字不会被黄色背景遮挡。

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