change music hover

assets/js/temp.js

@@ -1,5 +1,5 @@
 // Start music.
-$(".video-self").tubeplayer({
+$(".video-self2").tubeplayer({
   width: 0.001,
   height: 0.001,
   initialVideo: "UE9fPWy1_o4",
@@ -33,6 +33,17 @@ $('.volume').on('blur', function() {
   localStorage.setItem('volumeValue', val);
 });
 
+// Show music options.
+var musicHover;
+$('.music-icon, .music-options').hover(function() {
+  clearTimeout(musicHover);
+  $('.music-options').fadeIn();
+}, function() {
+  musicHover = setTimeout(function() {
+    $('.music-options').fadeOut();
+  }, 500);
+});
+
 // Music options.
 $('.music-icon').on('click', function() {
   if($(this).hasClass('active')) {

client/index.html

@@ -17,7 +17,7 @@
   <span class="video-self"></span>
   <i class="music-icon active" title="Click to mute/unmute music"></i>
   <div class="music-options">
-    <label for="volume">Volume</label>
+    <label for="volume">Volume:</label>
     <input type="text" class="volume" id="volume">
     <label for="volume">%</label>
   </div>

client/scss/_base.scss

@@ -111,11 +111,6 @@ body {
   transition: all .2s ease-in-out 0s;
   z-index: 20;
   padding: 30px;
-
-  &:hover .music-options {
-    opacity: 1;
-    visibility: visible;
-  }
 }
 
 .music-icon {
@@ -143,9 +138,8 @@ body {
   color: #8798ac;
   clear: both;
   margin: 15px 0 0 0;
-  opacity: 0;
-  visibility: hidden;
-  width: 170px;
+  width: 180px;
+  display: none;
 
   label {
     float: left;