创建可点击的叠加层答案

【问题标题】：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);

【讨论】：