在鼠标悬停时显示图像的某些部分

Ber*_*nTW 8 javascript css html5

在图像被涂黑的情况下,使用"战争迷雾"类型的东西的最佳方法是什么,但随后当用户将鼠标悬停在图像上时,会显示光标周围的区域.因此,可能在图像上使用CSS设置了一些图层,当用户将鼠标悬停在图像上时,它变得透明,因此可以在鼠标周围的区域中看到图像,但图像的其余部分仍然是黑屏.

Jea*_*one 5

如果你只是想使用javascript和css来做到这一点:

  • 创建一个中间有透明孔的黑色图像
  • 使用一些JavaScript来获取鼠标位置
  • 更新css以将雾图像的位置设置为鼠标指针

您必须确保所有内容都正确分层,以便您的图像位于雾图像下,如果不占用整个浏览器窗口,则雾图像位于其余内容之下.