diff --git a/internal/templates/watch.templ b/internal/templates/watch.templ
index ee74c7c..72f2b7f 100644
--- a/internal/templates/watch.templ
+++ b/internal/templates/watch.templ
@@ -232,6 +232,7 @@ templ VideoPlayer(data WatchPageData) {
 							</svg>
 						</button>
 						<div data-volume-wrap class="volume-wrap relative flex h-10 w-10 items-center justify-center overflow-visible">
+							<span data-volume-bridge class="pointer-events-none absolute inset-x-0 bottom-full h-[calc(100%+100px)]"></span>
 							<div class="volume-panel pointer-events-none absolute bottom-[calc(100%+26px)] left-1/2 z-30 -translate-x-1/2 opacity-0 invisible transition-opacity">
 								<input
 									data-volume-range
diff --git a/static/player.ts b/static/player.ts
index 8a7ad97..3ecbe92 100644
--- a/static/player.ts
+++ b/static/player.ts
@@ -502,13 +502,12 @@ const initPlayer = (): void => {
   })
 
   muteBtn?.addEventListener('mouseenter', () => {
-    volumeWrap?.classList.add('show-volume')
+    muteBtn.classList.add('show-volume')
     isHoveringVolume = true
     showControls()
   })
 
   muteBtn?.addEventListener('mouseleave', () => {
-    volumeWrap?.classList.remove('show-volume')
     isHoveringVolume = false
     showControls()
   })
diff --git a/static/style.css b/static/style.css
index 4bab98d..054c6b1 100644
--- a/static/style.css
+++ b/static/style.css
@@ -84,8 +84,9 @@
   height: 130px;
 }
 
-.volume-wrap.show-volume .volume-panel,
-.volume-wrap.show-volume::before,
+.volume-wrap:has([data-mute]:hover) .volume-panel,
+.volume-wrap:has([data-volume-bridge]:hover) .volume-panel,
+.volume-wrap:has(.volume-panel:hover) .volume-panel,
 .volume-wrap:focus-within .volume-panel,
 .volume-panel:hover,
 .volume-panel:focus-within {
@@ -94,7 +95,9 @@
   pointer-events: auto;
 }
 
-.volume-wrap.show-volume .volume-underline,
+.volume-wrap:has([data-mute]:hover) .volume-underline,
+.volume-wrap:has([data-volume-bridge]:hover) .volume-underline,
+.volume-wrap:has(.volume-panel:hover) .volume-underline,
 .volume-wrap:focus-within .volume-underline {
   opacity: 1;
 }