申请报名页面导航增加鼠标经过的效果

src/pages/my/account/home.vue

@@ -8,9 +8,9 @@
     </div>
     <div class="card" style="min-height: 360px">
       <ul class="nav">
-        <li @click="toApplication"><img src="../../../assets/images/my_01.png" /></li>
-        <li @click="toInterview"><img src="../../../assets/images/my_02.png" /></li>
-        <li @click="toAdmission"><img src="../../../assets/images/my_03.png" /></li>
+        <li class="nav-application" @click="toApplication"></li>
+        <li class="nav-interview" @click="toInterview"></li>
+        <li class="nav-admission" @click="toAdmission"></li>
       </ul>
       <div class="progress">
         <el-steps :active="activeProgress" finish-status="success" align-center>
@@ -121,22 +121,30 @@ export default {
   padding: 40px 70px 20px;
   li {
     position: relative;
-    width: 180px;
-    height: 120px;
+    width: 188px;
+    height: 128px;
+    cursor: pointer;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
   }
-  a {
-    color: currentColor;
+}
+.nav-application {
+  background-image: url('../../../assets/images/my_01.png');
+  &:hover {
+    background-image: url('../../../assets/images/my_01_hover.png');
+  }
+}
+.nav-interview {
+  background-image: url('../../../assets/images/my_02.png');
+  &:hover {
+    background-image: url('../../../assets/images/my_02_hover.png');
   }
-  .cover {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    font-weight: 600;
-    color: #fff;
-    text-align: center;
-    background-color: rgba(0, 0, 0.5);
+}
+.nav-admission {
+  background-image: url('../../../assets/images/my_03.png');
+  &:hover {
+    background-image: url('../../../assets/images/my_03_hover.png');
   }
 }
 .result {