将鼠标悬停在图像上时，仅显示光标所在的部分答案

【问题标题】：When hovering over image, only display the part where the cursor is over it将鼠标悬停在图像上时，仅显示光标所在的部分
【发布时间】：2021-09-15 17:10:11
【问题描述】：

提前了解：
您可以在https://juek3y.com 上查看当前代码或现场演示（没有工作悬停图像）。

想法：
我希望，当我将光标（黑色圆圈）悬停在图像上时，仅显示光标悬停的图像的这一部分（而不是整个图像）。

问题：
我从哪里开始？我见过一些与 Z-Index 配合使用的 CodePens。但是，到目前为止，我还没有成功地与他们合作。对我来说，一个包含类似内容的示例网站就足够了。

为了更好地理解，我还有两张示例图片。

在第一张图片中，较小的圆圈/光标（黑色/青绿色圆圈）悬停在圆形文字上，但尚未与图片相交。因此这是隐藏的。

在第二张图片中，光标已经悬停在图片上方一点，这部分图片也显示出来了。

【问题讨论】：

相关：stackoverflow.com/a/49793884/8620333
@TemaniAfif 我明白你的意思，我自己也使用过这种方法。但问题是文本或图像始终可见，无论光标是否悬停在它上面。只有颜色会改变。

标签： javascript html css image hover

【解决方案1】：

您可以将 CSS clip-path 属性与 mousemove 侦听器结合使用，以在鼠标下显示正面图像，并清除 mouseleave 上的剪辑路径。

粗略的工作 sn-p 在叠加图像上使用 CSS invert filter。您可以轻松添加事件委托以处理多个叠加层等。

const overlay = document.querySelector('.overlay');

overlay.addEventListener('mousemove', e => {
  const {height, width} = e.currentTarget.getBoundingClientRect();
  
  const x = e.offsetX;
  const y = e.offsetY;
  
  const xPercent = Math.round((x/width)*100);
  const yPercent = Math.round((y/height)*100);

  e.currentTarget.style.clipPath = `circle(18% at ${xPercent}% ${yPercent}%)`;
});

overlay.addEventListener('mouseleave', e => {
  e.currentTarget.style.clipPath = null; 
});

.container {
  position: relative;
}

.container img {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.overlay {
  filter: invert(var(--value, 100%));
  clip-path: circle(0 at 49% 45%);
}

<div class='container'>
  <img src='https://source.unsplash.com/random' />    
  <img src='https://source.unsplash.com/random' class='overlay'/>
</div>

【讨论】：

【解决方案2】：

您可以使用 CSS 掩码在元素中“挖一个洞”。

您可以将要（部分）显示的图像作为背景显示到 div 中，然后使用 after 伪元素覆盖它，该伪元素将您想要的图像作为背景放在前面，并用径向渐变遮罩以鼠标位置定位。

这个sn-p以灰度图叠加彩色图像为例：

window.onload = function() {
  const div = document.querySelector('.hole');
  let isIn = false;
  div.addEventListener('mouseover', function() {
    isIn = true;
  });
  div.addEventListener('mouseout', function() {
    isIn = false;
  });
  div.addEventListener('mousemove', function() {
    if (isIn) {
      div.style.setProperty('--x', event.clientX + 'px');
      div.style.setProperty('--y', event.clientY + 'px');
    }
  });
}

.hole {
  background-image: url(https://picsum.photos/id/1016/1024/768);
  background-size: cover;
  --x: 200px;
  --y: 150px;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.hole::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(https://picsum.photos/id/1016/1024/768?grayscale);
  background-size: cover;
  z-index: 1;
  -webkit-mask-repeat: no-repeat no-repeat;
  mask-repeat: no-repeat no-repeat;
  -webkit-mask-image: radial-gradient(200px at var(--x) var(--y), transparent 95%, black 100%);
  mask-image: radial-gradient(200px at var(--x) var(--y), transparent 95%, black 100%);
}

&lt;div class="hole"&gt;&lt;/div&gt;

【讨论】：