Html li元素的悬停效果在google chrome中无法正常工作

嘿，我的问题是我的悬停效果在谷歌浏览器中不能正常工作。请参阅GIF:。它在Firefox中工作。有人能帮我在Chrome上运行吗？我认为问题在于我的#flat的CSS（js在这里并不重要）

代码笔：

var=true；
函数flattoZero（）{
document.getElementById（“flat”）.style.top=“0%”；
document.getElementById（“flat”）.style.left=“0%”；
}
函数flattoherlight（）{
document.getElementById（“flat”）.style.top=“1%”；
document.getElementById（“flat”）.style.left=“1%”；
}
函数flattotheLeft（）{
document.getElementById（“flat”）.style.top=“1%”；
document.getElementById（“flat”）.style.left=“-1%”；
}
函数单击（）{
const card=document.getElementById（“flipable”）；
卡片.classList.toggle（“翻转卡片内部活动”）；
flattoZero（）；
setTimeout（函数（）{flattotheLeft（）；}，500）；
单击=假；
}
函数clickback（）{
const card=document.getElementById（“flipable”）；
卡片.classList.toggle（“翻转卡片内部活动”）；
flattoZero（）；
setTimeout（函数（）{flattotheRight（）；}，500）；
单击=真；
}
函数mouseOver（）{
如果（单击）{
flattoZero（）；
}
}
函数mouseOut（）{
如果（单击）{
平直到右（）；
}
}
函数mouseoverfliped（）{
如果（！单击）{
flattoZero（）；
}
}
函数mouseOutflipped（）{
如果（！单击）{
flattotheLeft（）；
}
}

：根目录{
/*
--字体颜色：rgb（255、238、232）；
--平面颜色：rgb（255、114、67）；
--主要背景色：rgb（255、213、197）；
*/
/*
--字体颜色F:rgb（255、255、255）；
--平面颜色f:rgb（255、242、67）；
--主要背景色F:rgb（42,42,44）；
*/
--字体颜色F:rgb（255、255、255）；
--平面颜色f:rgb（67170255）；
--主要背景色F:rgb（42,42,44）；
--字体颜色：rgb（255、255、255）；
--字体悬停颜色：白色；
--字体下划线颜色：白色；
--导航字体颜色：rgb（65,65,65）；
--汉堡颜色：var（--字体颜色）；
--阴影颜色：rgba（58,58,58,0.2）；
--主要背景色：rgb（175、175、175）；
}
正文{
/*Futura PT灯*/
字体系列：futura pt，无衬线；
字号：600；
字体：斜体；
颜色：var（--font colorF）；
背景色：var（--主背景色f）；
宽度：100%；
高度：100vh；
边际：0px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
过渡：所有400ms放松；
}
#桌面{
身高：100%；
宽度：自动；
}
.左中锋{
位置：绝对位置；
字体大小：12vmin；
最高：50%；
左：29%；
转换：翻译（-50%，-50%）；
过渡时间：0.30s；
}
.右中心{
位置：绝对位置；
字体大小：12vmin；
最高：50%；
左：75%；
转换：翻译（-50%，-50%）；
过渡时间：0.30s；
}
.汉堡{
位置：绝对位置；
最高：5%；
左：2.5%；
光标：指针；
}
.汉堡部{
高度：4px；
背景色：var（--汉堡色）；
保证金：5px；
边界半径：50px；
过渡：0.3s；
}
.line1{
宽度：36px；
}
.line2{
宽度：24px；
}
.line3{
宽度：30px；
}
.汉堡：悬停部{
宽度：36px；
}
.导航{
列表样式类型：无；
字体大小：6vmin；
字号：500；
}
.翻盖卡片{
前景：10000像素；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
身高：100%；
宽度：100%；
溢出：隐藏；
}
.翻转卡内部{
位置：相对位置；
身高：80%；
宽度：90%；
最大宽度：162vh；
过渡时间功能：轻松；
过渡时间：0.5s；
变换样式：保留-3d；
}
.翻转卡内部激活{
变换：旋转（180度）；
}
.正面翻转卡片，.背面翻转卡片{
背景色：黑色；
位置：绝对位置；
身高：100%；
宽度：100%；
-webkit背面可见性：隐藏；/*Safari*/
背面可见性：隐藏；
溢出：隐藏；
盒影：无；
}
.翻转卡正面{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.把卡片翻回去{
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：var（--字体颜色）；
变换：旋转（180度）；
}
保险商实验室{
显示器：flex；
弯曲方向：立柱；
列表样式类型：无；
对齐项目：开始；
证明内容：之间的空间；
}
ulli{
填充：6px0；
}
ulli p{
光标：指针；
位置：相对位置；
显示：块；
填充：4px0；
字号：500；
字体大小：4vh；
颜色：var（--nav字体颜色）；
文字装饰：无；
文本转换：大写；
过渡：0.5s；
字体系列：“Raleway”，无衬线；
字体大小：4vh；
文本转换：小写；
}
ullip：：之后{
位置：绝对位置；
内容：“；
最高：100%；
左：0；
宽度：100%；
高度：3倍；
背景：var（--字体下划线颜色）；
变换：scaleX（0）；
变换原点：右；
转变：转变0.5s；
}
ullip：悬停{
颜色：var（--字体悬停颜色）；
}
ul li p：悬停：：之后{
变换：scaleX（1）；
变换原点：左；
}
#平坦的{
位置：绝对位置；
身高：100%；
宽度：100%；
最高：1%；
左：1%；
背景色：var（--平色F）；
z指数：-5；
过渡：0.3s；
}
@媒体屏幕和屏幕（最大宽度：100vh）{
.左中锋{
字体大小：6vmin；
最高：8.2%；
左：62%；
}
.右中心{
字体大小：6vmin；
最高：8.2%；
左：85%；
}
}

名称
名称

返回

关于我

计划

接触