Question

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

我正在寻找显示mejs__horizontal-volume-slider的方法，并在将鼠标悬停在mejs__volume-button上时调整音量，然后转到mejs__horizontal-volume-slider。

网址：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可能会更好。

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

1 个答案: