title: Make an element appear and make adjustments when hovering over another element
body: <p>I'm having problems with my code. I have it set up properly to show a hidden div <code>mejs__horizontal-volume-slider</code> when you hover over <code>mejs__volume-button</code> and shift other elements to the right to accommodate <code>mejs__horizontal-volume-slider</code>. The problem I have is that <code>mejs__horizontal-volume-slider</code> disappears when you move off <code>mejs__volume-button</code>. </p>
  
  <p>I'm looking for a way to show <code>mejs__horizontal-volume-slider</code> and adjust the volume when you hover over <code>mejs__volume-button</code> and move over to <code>mejs__horizontal-volume-slider</code>.</p>
  
  <p>URL: <a href="http://wpfreelance.bayoumedia.net/audio/" rel="nofollow noreferrer">http://wpfreelance.bayoumedia.net/audio/</a></p>
  
  <p>JS code:</p>
  
  <pre><code>  $(document).ready(function() {
  $('.mejs__volume-button').hover(
  function () {
   $('.mejs__horizontal-volume-slider').css({"display":"block"});
   $('.mejs__time-slider').css({"width":"-moz-calc(100% - 50px)"});
   $('.mejs__time-slider').css({"width":"-webkit-calc(100% - 50px)"});
   $('.mejs__time-slider').css({"width":"calc(100% - 50px)"});
   $('.mejs__speed-button').css({"right":"40px"});
  },
  function () {
   $('.mejs__horizontal-volume-slider').css({"display":"none"});
   $('.mejs__time-slider').css({"width":"100%"});
   $('.mejs__speed-button').css({"right":"0"});
  });});
  </code></pre>