Html 如何修复未发生的悬停效果

基本上，我使用两个单独的css文件，但是图标按钮的悬停效果不起作用。我试着把它放在一个单独的隔间里，但不起作用。我甚至试着将其中一个css文件内容放入html文件主体中的标记中。我不知道还能做什么。有没有办法解决这个问题

/*第一个文件*/
* {
保证金：0；
填充：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
html{
字体大小：10px；
字体系列：“Roboto Cn”，无衬线；
}
身体{
-ms-overflow-x：隐藏；
溢出x：隐藏；
}
a{
文字装饰：无；
颜色：#eee；
}
标题{
宽度：100%；
高度：100vh；
背景：-webkit线性梯度（rgba（0,0,0,0.8），rgba（0,0,0,0.5）），url（“https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png）中间顶部无重复；
背景：-o-线性梯度（rgba（0,0,0,0.8），rgba（0,0,0,0.5）），url（“https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png）中间顶部无重复；
背景：线性梯度（rgba（0,0,0,0.8），rgba（0,0,0,0.5）），url（“https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png）中间顶部无重复；
背景尺寸：封面；
}
p{
位置：相对位置；
文本对齐：居中；
字体系列：“Roboto Cn”，无衬线；
字体大小：50px；
最高：50%；
左：0；
文本阴影：0 0 3px#FF0000，0 0 5px黄色；
z指数：2；
}
.集装箱{
最大宽度：120雷姆；
宽度：90%；
保证金：0自动；
}
导航{
垫面：5rem；
显示器：flex；
显示：-webkit flex；
证明内容：之间的空间；
-webkit证明内容：之间的空间；
-moz-justify内容：之间的空间；
对齐项目：居中；
-webkit对齐项目：居中；
文本转换：大写；
字体大小：1.6rem；
}
.品牌{
字体大小：3rem；
字体大小：300；
-webkit转换：translateX（-1000px）；
-o变换：translateX（-1000px）；
-moz变换：translateX（-1000px）；
-ms转换：translateX（-1000px）；
转换：translateX（-1000px）；
-webkit动画：向前滑动0.5秒；
-o型动画：向前滑动0.5秒；
-moz动画：向前滑动0.5s；
动画：向前滑动0.5秒；
}
.brand.textgradient{
字体大小：3rem；
字体大小：300；
背景：-webkit线性梯度（向左，一枝黄花，黄色，一枝黄花，黄色）；
背景：-o-线性梯度（向左，一枝黄花，黄色，一枝黄花，黄色）；
背景：线性梯度（向左，一枝黄花，黄色，一枝黄花，黄色）；
背景大小：400%；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
-webkit动画：线性无限；
-o-动画：线性无限；
-moz动画：线性无限；
动画：线性无限；
}
@-webkit关键帧文本渐变{
0% {
背景位置：0%；
}
100% {
背景位置：90%；
}
}
@-o-关键帧文本渐变{
0% {
背景位置：0%；
}
100% {
背景位置：90%；
}
}
@-moz关键帧文本渐变{
0% {
背景位置：0%；
}
100% {
背景位置：90%；
}
}
@关键帧文本渐变{
0% {
背景位置：0%；
}
100% {
背景位置：90%；
}
}
.brand.textgradient2{
字体大小：3rem；
字体大小：300；
背景：-webkit线性渐变（向右，暗色，#F80F01，暗色，#F80F01）；
背景：-o-线性梯度（向右，暗色，#F80F01，暗色，#F80F01）；
背景：线性渐变（向右，暗色，#F80F01，暗色，#F80F01）；
背景大小：400%；
背景位置：0%；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
-webkit动画：线性无限；
-o-动画：线性无限；
-moz动画：线性无限；
动画：线性无限；
}
.brand.textgradient3{
字体大小：3rem；
字体大小：300；
背景：-webkit线性渐变（向右，#0036DA，海军，#0036DA，海军）；
背景：-o-线性梯度（向右，#0036DA，海军，#0036DA，海军）；
背景：线性梯度（向右，#0036DA，海军，#0036DA，海军）；
背景大小：400%；
背景位置：0%；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
-webkit动画：线性无限；
-o-动画：线性无限；
-moz动画：线性无限；
动画：线性无限；
}
@-webkit关键帧文本渐变{
0% {
背景位置：0%；
}
100% {
背景位置：90%；
}
}
@-o-关键帧文本渐变{
0% {
背景位置：0%；
}
100% {
背景位置：90%；
}
}
@-moz关键帧文本渐变{
0% {
背景位置：0%；
}
100% {
背景位置：90%；
}
}
@关键帧文本渐变{
0% {
背景位置：0%；
}
100% {
背景位置：90%；
}
}
导航{
显示器：flex；
显示：-webkit flex；
}
导航ul.ulnav li.linav{
列表样式：无；
-webkit转换：translateX（1000px）；
-o-变换：translateX（1000px）；
-moz变换：translateX（1000px）；
-ms变换：translateX（1000px）；
转换：translateX（1000px）；
-webkit动画：向前滑动0.5秒；
-o型动画：向前滑动0.5秒；
-moz动画：向前滑动0.5s；
动画：向前滑动0.5秒；
}
第N个孩子（1）{
-webkit动画延迟：0秒；
-o-动画延迟：0s；
-moz动画延迟：0s；
动画延迟：0s；
}
第N个孩子（2）{
-webkit动画延迟：0.5s；
-o-动画-延迟：0.5s；
-moz动画延迟：0.5s；
动画延迟：0.5s；
}
第N个孩子（3）{
-webkit动画延迟：1s；
-o-动画-延迟：1s；
-moz动画延迟：1s；
安尼