将鼠标悬停在另一个元素上时显示一个元素并进行调整

Question

我的代码有问题。当您将鼠标悬停在 mejs__volume-button 上并将其他元素向右移动以容纳 mejs__horizontal-volume-slider 时，我已将其正确设置为显示隐藏的 div mejs__horizontal-volume-slider。我遇到的问题是当你离开 mejs__volume-button 时 mejs__horizontal-volume-slider 消失了。

我正在寻找一种方法来显示 mejs__horizontal-volume-slider 并在您将鼠标悬停在 mejs__volume-button 上并移至 mejs__horizontal-volume-slider 时调整音量。

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

JS代码：

  $(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

将滑块和按钮插入同一个容器中，并通过容器触发悬停效果，这样当您在滑块上移动时，您仍然悬停在容器上。顺便用CSS可能更好。

将鼠标悬停在另一个元素上时显示一个元素并进行调整

Make an element appear and make adjustments when hovering over another element

javascript

css

jquery

mediaelement.js