diff --git a/static/player.ts b/static/player.ts
index 0c7cfc2..8a7ad97 100644
--- a/static/player.ts
+++ b/static/player.ts
@@ -501,12 +501,14 @@ const initPlayer = (): void => {
     showControls()
   })
 
-  volumeWrap?.addEventListener('mouseenter', () => {
+  muteBtn?.addEventListener('mouseenter', () => {
+    volumeWrap?.classList.add('show-volume')
     isHoveringVolume = true
     showControls()
   })
 
-  volumeWrap?.addEventListener('mouseleave', () => {
+  muteBtn?.addEventListener('mouseleave', () => {
+    volumeWrap?.classList.remove('show-volume')
     isHoveringVolume = false
     showControls()
   })
diff --git a/static/style.css b/static/style.css
index c34c426..51b96ce 100644
--- a/static/style.css
+++ b/static/style.css
@@ -84,7 +84,7 @@
   height: 130px;
 }
 
-.volume-wrap:hover .volume-panel,
+.volume-wrap.show-volume .volume-panel,
 .volume-wrap:focus-within .volume-panel,
 .volume-panel:hover,
 .volume-panel:focus-within {
@@ -93,7 +93,7 @@
   pointer-events: auto;
 }
 
-.volume-wrap:hover .volume-underline,
+.volume-wrap.show-volume .volume-underline,
 .volume-wrap:focus-within .volume-underline {
   opacity: 1;
 }