diff --git a/src/css/index.scss b/src/css/index.scss
index 29b5441..c389d56 100644
--- a/src/css/index.scss
+++ b/src/css/index.scss
@@ -207,6 +207,12 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
                 cursor: pointer !important;
                 flex: 1;
 
+                &:hover {
+                    .aplayer-bar .aplayer-played .aplayer-thumb {
+                        transform: scale(1);
+                    }
+                }
+
                 .aplayer-bar {
                     position: relative;
                     height: 2px;
@@ -236,11 +242,12 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
                             right: 5px;
                             margin-top: -4px;
                             margin-right: -10px;
-                            height: 8px;
-                            width: 8px;
+                            height: 10px;
+                            width: 10px;
                             border-radius: 50%;
-                            background: #fff;
-                            cursor: pointer !important;
+                            cursor: pointer;
+                            transition: all .3s ease-in-out;
+                            transform: scale(0);
                         }
                     }
                 }
@@ -249,7 +256,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
             .aplayer-time {
                 position: relative;
                 right: 0;
-                bottom: 3px;
+                bottom: 4px;
                 height: 17px;
                 color: #999;
                 font-size: 11px;
diff --git a/src/js/controller.js b/src/js/controller.js
index 482b09d..68f34a8 100644
--- a/src/js/controller.js
+++ b/src/js/controller.js
@@ -58,13 +58,6 @@ class Controller {
             }
         });
 
-        this.player.template.thumb.addEventListener('mouseover', () => {
-            this.player.template.thumb.style.background = this.player.options.theme;
-        });
-        this.player.template.thumb.addEventListener('mouseout', () => {
-            this.player.template.thumb.style.background = '#fff';
-        });
-
         const thumbMove = (event) => {
             const e = event || window.event;
             let percentage = (e.clientX - utils.getElementViewLeft(this.player.template.barWrap)) / barWidth;
diff --git a/src/template/player.art b/src/template/player.art
index a2b2c5f..ef161ff 100644
--- a/src/template/player.art
+++ b/src/template/player.art
@@ -14,7 +14,7 @@
             <div class="aplayer-bar">
                 <div class="aplayer-loaded" style="width: 0"></div>
                 <div class="aplayer-played" style="width: 0; background: {{ options.theme }};">
-                    <span class="aplayer-thumb" style="border: 1px solid {{ options.theme }};"></span>
+                    <span class="aplayer-thumb" style="background: {{ options.theme }};"></span>
                 </div>
             </div>
         </div>