【问题标题】:Creating a clickable overlay创建可点击的叠加层
【发布时间】:2020-04-13 15:37:44
【问题描述】:

下午,

我在使用模板时遇到了一点问题,如果您能指出任何可以提供帮助的人的方向,我将不胜感激。

我们正在开发一个新网站并有一个视频组合页面,当您将鼠标悬停在https://dev.mintyslippers.com/video-preview/ 时,它会播放我们视频的一些预览

我有 2 个目标。首先是使实际视频可点击,因为查看投资组合项目的唯一方法是单击下面的链接。我猜我需要添加或修改可点击的叠加层?

我的拉伸目标是让覆盖看起来更像https://dev.mintyslippers.com/text-sliding/but,当你像https://dev.mintyslippers.com/shader/一样悬停时也会变暗

这只是用户体验的事情。悬停时播放视频看起来不错,但对我来说它应该是可点击的。

我已经联系了模板开发人员,但可以理解的是,他们不提供任何自定义工作选项。

如果有帮助,我相信它会利用 MediaElement.js 并隐藏控件。

非常感谢

【问题讨论】:

  • 你试过视频上方的可点击透明图片吗?

标签: php wordpress templates


【解决方案1】:

您需要将 eventListener 附加到包含视频的 HTML 元素。您感兴趣的 eventListener 将被称为“onMouseOver()”。看看我在下面做的这个稍微修改过的例子:

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event

let videoElement = document.getElementById("yourVideoElement");
videoElement.addEventListener("mouseover", function( event ) { 
  // highlight the mouseover target
  event.target.style.color = "purple";

  // reset the color after a short delay
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-13
    • 1970-01-01
    • 1970-01-01
    • 2018-09-06
    • 2011-08-17
    • 2012-03-15
    相关资源
    最近更新 更多