悬停在另一个元素上时，使一个元素出现并进行调整

Question

I'm having problems with my code. I have it set up properly to show a hidden div mejs__horizontal-volume-slider when you hover over mejs__volume-button and shift other elements to the right to accommodate mejs__horizontal-volume-slider . The problem I have is that mejs__horizontal-volume-slider disappears when you move off mejs__volume-button .

I'm looking for a way to show mejs__horizontal-volume-slider and adjust the volume when you hover over mejs__volume-button and move over to mejs__horizontal-volume-slider .

URL: http://wpfreelance.bayoumedia.net/audio/

JS 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"});
});});

Answer 1

Insert the slider and the button in the same container, and trigger the hover effect with the container, so when you're moving over the slider, you're still hovering the container. It's probably better to use CSS by the way.