CSS悬停动画适用于代码沙盒(React)，但在Next.js项目中实现时会中断

Question

问题

在codesandbox中，我为div元素构建了一个悬停动画。我在next.js项目中使用了li元素的工作代码，但在复制代码后，悬停效果不会在悬停时触发，而是在单击时触发。另外：元素将停留在悬停位置，直到施加下一次单击为止。奇怪的

录制了一段小视频-->https://www.youtube.com/watch?v=IV7PIvmpzX8

可能是什么问题？

此页面的相关代码：

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;
}
&::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;
}
`;
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>
);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

行为是正常的，当您在平板电脑/移动模式下使用每个浏览器时，浏览器都会从普通光标切换到模拟触摸光标，用触摸事件取代通常的桌面浏览器事件。

在Chrome中，你可以使用他们的工具来改变这一点，就像他们的文档中显示的那样