Javascript 闭上眼睛

我正在尝试创建动画的眼睛。其中一个应该在光标位于其上时自行关闭。我做不到。谁能帮我修好它

CSS眼睛跟随鼠标
/*基地*/
*{边距：0；填充：0；}
html，正文{高度：100%；}
正文{背景色：#34312c；文本对齐：居中；}
正文：在{内容：''之前；浮动：左侧；高度：50%；页边距底部：-100px；}
.centered{显示：内联块；垂直对齐：中间；}
.centered:在{content:''之前；显示：内联块；高度：100%；垂直对齐：中间；}
.intro{-webkit动画：说明7s线性01；动画：说明7s线性01；背景：#111；颜色：#ddd；字体大小：18px；左侧：0；线条高度：0；不透明度：0；溢出：隐藏；填充：0；位置：绝对；右侧：0；顶部：0；z索引：1；}
a{color:#fff；游标：指针；}
a:已访问{color:#7eeded；cursor:pointer；}
@-webkit关键帧说明{
0%,
90%{不透明度：1；线条高度：1.5；填充：8px；}
100%{不透明度：0；线条高度：0；填充：0；}
}
@关键帧指令{
0%,
90%{不透明度：1；线条高度：1.5；填充：8px；}
100%{不透明度：0；线条高度：0；填充：0；}
}
/*眼睛*/
.眼睛{清晰：两个；}
.eye{背景色：#fff；边框半径：100px；方框阴影：插入0.50px rgba（10,10,100,4），插入0.20px rgba（10,10,100,4），0.40px rgba（0,0,0,8）；高度：200px；边距：0.30px；位置：相对；宽度：200px；}
.iris{背景色：#51b2d5；边框半径：40px；方框阴影：插入0 0 18px rgba（0,0,0,5），插入0 0 30px#1b4e6d；高度：80px；不透明度：9；宽度：80px；}
.瞳孔{背景：线性渐变（45度，#333，#000）；边框半径：20px；方框阴影：插入0.08px rgba（0,0,0,8）；高度：40px；宽度：40px；}
眼睛
艾里斯先生，
.瞳孔{-webkit背面可见性：隐藏；背面可见性：隐藏；-webkit透视图：1000；透视图：1000；-webkit变换：-webkit变换.3s放松，方框阴影.3s放松；变换：变换.3s放松，方框阴影.3s放松；}
/*#左上1*/
第1步：悬停~.眼睛{眼罩：嵌入0.50px rgba（10,10,100,4），嵌入-15px-15px 30px rgba（10,10,100,4），6px 6px 40px rgba（0,0,0,8）；}
.步骤1：悬停~.眼睛.虹膜{
盒影：插入4px4x18pxRGBA（0,0,0,5），插入-12px-12px30px#1b4e6d；
-webkit变换：translateX（-38px）translateY（-30px）skewX（-15度）skewY（10度）刻度（0.95）；
变换：translateX（-38px）translateY（-30px）skewX（-15度）skewY（10度）刻度（0.95）；
}
.步骤1：悬停~.眼睛.瞳孔{
-webkit变换：translateX（-3px）translateY（-3px）skewX（-4deg）skewY（4deg）尺度（0.95）；
变换：translateX（-3px）translateY（-3px）skewX（-4deg）skewY（4deg）标度（0.95）；
}
/*#2上中*/
第二步：悬停~.眼睛{眼框阴影：嵌入0.50px rgba（10,10,100,4），嵌入0-15px 30px rgba（10,10,100,4），0.6px 40px rgba（0,0,0,8）；}
.步骤2：悬停~.眼睛.虹膜{
盒影：插入0 4px 18px rgba（0,0,0,5），插入0-12px 30px#1b4e6d；
-webkit变换：translateY（-45px）旋转（15度）比例（0.97）；
变换：translateY（-45px）rotateX（15度）标度（0.97）；
}
.步骤2：悬停~.眼睛.瞳孔{
-webkit变换：translateY（-2px）旋转（10deg）比例（0.95）；
变换：translateY（-2px）rotateX（10度）标度（0.95）；
}
/*#3右上角*/
第三步：悬停~.眼睛{眼框阴影：嵌入0.50px rgba（10,10,100,4），嵌入15px-15px 30px rgba（10,10,100,4），6px 6px 40px rgba（0,0,0,8）；}
.步骤3：悬停~.眼睛.虹膜{
盒影：插图-4px4x18pxRGBA（0,0,0,5），插图12px-12px30px#1b4e6d；
-webkit变换：translateX（38px）translateY（-30px）skewX（15deg）skewY（-10deg）比例（0.95）；
变换：translateX（38px）translateY（-30px）skewX（15度）skewY（-10度）刻度（0.95）；
}
.步骤3：悬停~.眼睛.瞳孔{
-webkit变换：translateX（3px）translateY（-3px）skewX（4deg）skewY（-4deg）尺度（0.95）；
变换：translateX（3px）translateY（-3px）skewX（4deg）skewY（-4deg）标度（0.95）；
}
/*#4左中*/
.步骤4：悬停~.眼睛。眼睛，
.step-5:悬停~.eyes.右眼{方框阴影：插入0.50px rgba（10,10,100,4），插入-15px 0.30px rgba（10,10,100,4），6px 0.40px rgba（0,0,0,8）；}
.步骤4：悬停~.眼睛.虹膜，
.第五步：悬停~。眼睛。右眼。虹膜{
盒影：插入4px018pxRGBA（0,0,0,5），插入-12px010px#1b4e6d；
-webkit变换：translateX（-45px）旋转（15度）标度（0.97）；
变换：translateX（-45px）旋转（15度）刻度（0.98）；
}
.步骤4：悬停~.眼睛.瞳孔，
.第五步：悬停~。眼睛。右眼。瞳孔{
-webkit变换：translateX（-2px）旋转（10度）标度（0.95）；
变换：translateX（-2px）旋转（10度）标度（0.95）；
}
/*#6右中*/
.步骤6：悬停~.眼睛.眼睛，
.步骤5：悬停~。眼睛。眼睛向左{
盒影：嵌入0.50px rgba（10,10,100,4），嵌入15px 0.30px rgba（10,10,100,4），-6px 0.40px rgba（0,0,0,8）；
溢出：隐藏；
}
.步骤6：悬停~.眼睛.虹膜，
.步骤5：悬停~。眼睛。左眼。虹膜{
盒影：插图-4px018pxRGBA（0,0,0,5），插图12px030px1b4e6d；
-webkit变换：translateX（45像素）旋转（15度）刻度（0.97）；
变换：translateX（45像素）旋转（15度）刻度（0.98）；
}
.步骤6：悬停~.眼睛.瞳孔，
.步骤5：悬停~。眼睛。左眼。瞳孔{
-webkit变换：translateX（2px）旋转（10deg）比例（0.95）；
变换：translateX（2px）旋转（10deg）标度（0.95）；
}
/*#7左下角*/
第七步：悬停~.眼睛{眼框阴影：插入0.50px rgba（10,10,100,4），插入-15px 15px 30px rgba（10,10,100,4），6px-6px 40px rgba（0,0,0,8）；}
.步骤7：悬停~.眼睛.虹膜{
盒影：插图4px-4px 18px rgba（0,0,0,5），插图12px 12px 30px#1b4e6d；
-webkit变换：translateX（-38px）translateY（30px）skewX（15度）skewY（-10度）比例（0.95）；
变换：translateX（-38px）translateY（30px）skewX（15度）skewY（-10度）刻度（0.95）；
}
.步骤7：悬停~.眼睛.瞳孔{
-webkit变换：translateX（-3px）translateY（3px）skewX（4deg）skewY（-4deg）尺度（0.95）；
变换：translateX（-3px）translateY（3px）skewX（4deg）skewY（-4deg）标度（0.95）；
}
/*#8底部中心*/
.step-8:悬停~.eyes.ey
   .eye{overflow: hidden;}
   .shut {
       height: 200px;
   }
   .shut span {
       height: 29%;
       border-radius: 50% 50% 50% 50%;
   }