html - 隐藏视频控件，直到用户将鼠标悬停在视频上

Question

我试图隐藏视频上的视频控件，直到用户将鼠标悬停在视频上，然后控件才会显示。有什么想法或建议吗？谢谢。 而且我有不止一个视频。

HTML:

<div class="item spoon burger"><video width="300" height="auto" controls><source src="videos/sruthi.mp4" type="video/mp4"></video></div>

Answer 1

我们可以通过几行 jQuery 来实现这一点，利用 .hover() :

Working Example

<删除> $('#myvideo').hover(function toggleControls() { 如果(video.hasAttribute(“控件”)){ video.removeAttribute("控件") } 别的 { video.setAttribute("控件", "控件") } })

编辑 我在上面的代码中错误地留下了变量video。我将其更改为 this，这样您就不必管理获取 ID 的变量。

$('#myvideo').hover(function toggleControls() {
    if (this.hasAttribute("controls")) {
        this.removeAttribute("controls")
    } else {
        this.setAttribute("controls", "controls")
    }
})

HTML

<video width="300" height="auto" id="myvideo">
    <source src="#" type="video/mp4" />
</video>

---

更新:你提到你有几个视频。因此，您可以使用相同的逻辑，只需将额外的选择器添加到 $( ) 中即可。这是一个例子:

$('#yourID1, #yourID2, #yourID3').hover(function toggleControls() { ...

这样做会监听或等到它检测到您将鼠标悬停在其中一个 ID 上。

Updated fiddle