静态鼠标悬停旋转3D立方体时对应面:hover伪类不触发如何解决

这个问题的核心是浏览器的:hover伪类命中检测逻辑限制：默认只有鼠标指针发生位移时，浏览器才会重新计算指针下方对应的元素，元素自身通过动画发生位置/变换偏移时，不会主动触发这个检测流程，因此静止的鼠标不会自动识别到新旋转到指针位置的立方体面。

你之前尝试的z-index方案无效，是因为3D变换上下文中z-index默认不会改变元素在3D空间的堆叠优先级，强制调整反而可能破坏立方体的3D结构。

方案1：CSS轻量修复方案 #

通过给所有立方体面添加无视觉感知的微动画，强制浏览器持续重绘元素，每次重绘都会自动重新检测鼠标命中状态，即可实现自动触发hover效果：

/* 在你的.cube__face原有样式基础上新增以下规则 */
.cube__face {
  animation: hoverForceDetect 0.01s infinite;
  pointer-events: auto;
}

@keyframes hoverForceDetect {
  to {
    /* 极微小的Z轴偏移，肉眼完全不可见 */
    transform: translateZ(0.01px);
  }
}

这个方案几乎不会带来额外性能损耗，改动成本极低，适合简单的3D旋转场景。

方案2：JavaScript稳定兼容方案 #

如果需要更可控的效果、或者动画复杂度较高，可以用JS手动检测当前朝向用户的面，替代原生:hover伪类实现效果：

1. 首先把原有hover样式修改为自定义激活类：

/* 替换原有的.cube__face:hover规则 */
.cube__face--active {
    background: black;
    color: white;
}

2. 添加JS检测逻辑：

const cube = document.querySelector('.cube');
const faces = document.querySelectorAll('.cube__face');
let mouseInCube = false;
let mouseX = 0, mouseY = 0;

// 记录鼠标是否在立方体容器范围内
cube.addEventListener('mouseenter', () => mouseInCube = true);
cube.addEventListener('mouseleave', () => mouseInCube = false);
cube.addEventListener('mousemove', e => {
  const rect = cube.getBoundingClientRect();
  mouseX = e.clientX - rect.left;
  mouseY = e.clientY - rect.top;
});

// 每帧检测当前最靠前的面，自动添加激活状态
function detectFrontFace() {
  // 先清空所有面的激活状态
  faces.forEach(face => face.classList.remove('cube__face--active'));
  
  if (mouseInCube) {
    // 找到当前3D空间中Z轴坐标最高（最靠近用户）的面
    let maxZ = -Infinity;
    let frontFace = null;
    faces.forEach(face => {
      const transformMatrix = new DOMMatrix(getComputedStyle(face).transform);
      const currentZ = transformMatrix.m43;
      if (currentZ > maxZ) {
        maxZ = currentZ;
        frontFace = face;
      }
    });
    frontFace.classList.add('cube__face--active');
  }
  
  requestAnimationFrame(detectFrontFace);
}

// 启动检测
requestAnimationFrame(detectFrontFace);

这个方案不受动画类型限制，兼容性更好，还可以扩展更多自定义交互逻辑。

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