Javascript 解除鼠标悬停在图像上的模糊部分

我一直在尝试制作一个看起来模糊的图像，但当鼠标悬停在上面时，它会清除光标指向的那一小块区域。很像这个网站

这是我到目前为止的代码，它不是100%工作。我正在使用HTML、CSS和Javascript。不幸的是，我对javascript一无所知

HTML:

Javascript:

   $('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1 circle')[0];
    mask.setAttribute("cy", (upY - 5) + 'px');
    mask.setAttribute("cx", upX + 'px');
});

任何帮助都将不胜感激。 谢谢

---

Joe

我建议您为正在渲染图像的div提供id，因此考虑到图像div的id是divImage，如下所示： HTML:

我想这应该有用。

我会用这个

有一些模糊遮罩（完全充满模糊）

处理

OnMouseMove

事件

只需在鼠标移动过程中清除鼠标实际位置周围遮罩区域的模糊即可

在某些周期性事件上，如

OnTimer

模糊遮罩，使任何已清除的空间随时间而减少。然后在图像上应用遮罩模糊（来自链接Q/A），并将其绘制到查看区域

---

这是一个实验性的解决方案。每次鼠标移动时，在svg掩码中动态注入一个新的圆圈元素，然后延迟隐藏每个圆圈

var svgNS=”http://www.w3.org/2000/svg";
$（'.pic'）.mousemove（函数（事件）{
event.preventDefault（）；
var upX=event.clientX；
var upY=event.clientY；
变量掩码=$（'#mask1'）[0]；
var circle=document.createElements（svgNS，“circle”）；
circle.setAttribute（“cx”，upX）；
circle.setAttribute（“cy”，upY）；
圆.setAttribute（“r”、“30”）；
circle.setAttribute（“填充”、“白色”）；
circle.setAttribute（“过滤器”、“url（#过滤器2）”）；
蒙版。追加子项（圆）；
setTimeout（函数（）{
circle.style.opacity='0'；
setTimeout（函数（）{
面具。移除儿童（圆圈）；
}, 300);
}, 300);
});
.pic{
文本对齐：居中；
位置：相对位置；
高度：250px；
}
.模糊{
身高：100%；
}
.覆盖{
位置：绝对位置；
顶部：0px；
左：0px；
身高：100%；
}
圈{
不透明度：1；
-webkit过渡：不透明度200ms线性；
过渡：不透明度200ms线性；
}

我不明白。是否要在悬停时解除部分图像的模糊，还是要在悬停时解除整个图像的模糊？我要解除鼠标所在位置的模糊，因此是图像的一部分。与此非常相似：www.canva.comHi@smdsgn！这看起来很有趣，我已经尝试过了，但仍然只有一个模糊的图像：/它在stackoverflow的预览中工作得很好！也许这就是我将javascript/Jquery和CSS放入HMTL文件的方式？谢谢你的回复，真的很有帮助：）你可能错过了什么。请注意在我给您的脚本之前添加jQuery。如果你对你的新代码做了修改，我可以告诉你出了什么问题。下面是对代码的修改：再次感谢SMDSGN谢谢你的修改！只是试图改变图像等！感谢您的帮助，男士：）只需更改两个图像元素的xlink:href即可。如果此代码对您有所帮助，请不要忘记接受答案。
body {
    margin: 0;
}
.pic {
    text-align: center;
    position: relative;
    height: 250px;
}
.blur {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}

   $('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1 circle')[0];
    mask.setAttribute("cy", (upY - 5) + 'px');
    mask.setAttribute("cx", upX + 'px');
});

<div id="divImage">
//Your Image inside this div
</div>

$("#divImage").hover(function(){
//Your Complete on hover function here.
})