悬停在模糊的视频上，如何取消指针周围圆圈的模糊

Question

在寻找答案很长时间后，这是我的问题：

如何显示 html5 视频中悬停时模糊的部分？

这是一些代码：

<div id="container">
  <video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
Sorry, your browser does not support HTML5 video.
</video>

#container {
  width: 640px;
  height: 360px;
  overflow: hidden;
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
}

#videobcg {
  width: 100%;
  height: auto;
}

因此，由于它很模糊，我想将鼠标悬停并在指针周围显示一个圆圈，以便您可以透过模糊的 div 看到。

非常感谢您的帮助。如果我需要使用画布也可以，只需寻找任何答案即可。

不要忘记它是一个视频，所以这样的东西对我来说不起作用，因为我需要在用户交互时播放视频：

http://codepen.io/jalalazimi/details/tCGbw

Answer 1

所以，当然，您需要在此处使用 JavaScript 作为光标部分。

您可能还需要做一些数学运算。

这是我使用剪辑路径向正方形添加模糊效果的示例：

https://codepen.io/TigerYT/pen/abrZGbW

主要部分如下：

  backdrop-filter: blur(25px) grayscale(1);

  --height: 200px;
  --width: 200px;

  clip-path: polygon(
    0% 0%,
    0% 100%,
    calc(50% - var(--width) / 2) 100%,
    calc(50% - var(--width) / 2) calc(50% - var(--height) / 2),
    calc(50% + var(--width) / 2) calc(50% - var(--height) / 2),
    calc(50% + var(--width) / 2) calc(50% + var(--height) / 2),
    calc(50% - var(--width) / 2) calc(50% + var(--height) / 2),
    calc(50% - var(--width) / 2) 100%,
    100% 100%,
    100% 0%
  );

根据您的需要调整该代码。