CSS hover动画在CodeSandbox(React)正常，迁移至Next.js后触发异常

我在CodeSandbox中为div元素实现了hover动画，将代码复制到Next.js项目的li元素后，hover效果未在鼠标悬停时触发，反而点击才触发，且元素会停留在悬停状态直到下一次点击。

问题根源在于StyledLi的::after伪元素——它是绝对定位且完全覆盖了li的整个区域，默认会拦截鼠标事件，导致下方的li无法接收到hover事件。点击时触发效果是因为元素获得焦点，而非hover。

修复步骤 #

1. 给::after伪元素添加pointer-events: none，让鼠标事件穿透伪元素传递到li上，这样hover就能正常触发；
2. 可选：添加:focus样式重置，避免点击后元素保持悬停状态。

修改后的代码 #

import Link from "next/link";
import styled from "styled-components";

console.clear();

const StyledUl = styled.ul`
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 0px 50px;
`;
const StyledLi = styled.li`
  display: grid;
  place-items: center;

  height: 80px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  border-radius: 20px;
  transition: all 0.1s ease-in-out;
  
  &:hover {
    transform: scale(1.1);
  }
  &:hover::after {
    opacity: 1;
  }
  /* 重置focus状态，避免点击后保留悬停效果 */
  &:focus {
    transform: none;
    outline: none; /* 可选：去掉默认焦点边框 */
  }
  &:focus::after {
    opacity: 0;
  }
  
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    pointer-events: none; /* 关键修复：让鼠标事件穿透到li */
  }
`;
const StyledP = styled.p`
  font-size: var(--fontsize_pageText);
`;

export default function Main() {
  return (
    <StyledUl>
      <StyledLi>
        <StyledP>something</StyledP>
      </StyledLi>
      <StyledLi>
        <StyledP>something</StyledP>
      </StyledLi>
      <StyledLi>
        <StyledP>something</StyledP>
      </StyledLi>
      <StyledLi>
        <StyledP>something</StyledP>
      </StyledLi>
    </StyledUl>
  );
}

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