在HTML中，用放大镜将鼠标悬停在图像上

Question

我使用以下指示在网页中为图像添加了放大镜： https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp 即使鼠标不悬停在图像上，放大的框仍会停留在图像上。我该如何修改代码，使放大镜只在鼠标悬停在图像上时出现？

谢谢。

- Mohammad

Answer 1

您可以使用CSS中的hover来完成这个操作，无需使用JavaScript。请从下面复制样式表。

<style>
* {box-sizing: border-box;}
.img-magnifier-container {
  position:relative;
  cursor:none;
}
.img-magnifier-container:hover .img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 100px;
  height: 100px;
  display:block;
}
.img-magnifier-glass {
  display:none;
}

</style>

- MMallette

---

你好，感谢提供简单的解决方案。它真的有效！ 我有另一个问题：是否可以同时在4张图像上使用放大镜？我想在它们的相同区域放大4张图像。我需要这样做来比较这些图像。 - Mohammad

我不确定它是否适用于当前代码设置的方式，可能需要更多的工作。理论上，您可以全局定义backgroundPosition，然后通过修改后的magnify版本将该值传递到其他图像上，而无需移动放大镜或获取光标。 - MMallette

Answer 2

在HTML中，有一个名为onmouseleave的事件。当你的鼠标离开图像时，你可以让元素调用一个JavaScript函数。 以下是更多信息的链接：https://www.w3schools.com/jsref/event_onmouseleave.asp 以下是基本用法： onmouseleave="functionName()"

- Gorgamite

---

我做了这个： `