javascript - 在html中使用放大镜将鼠标悬停在图像上

Question

我使用以下说明在我的网页中为图像添加了一个放大镜: https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp

即使鼠标不在放大框上，放大框也会停留在图像上。我怎样才能修改为只有当鼠标悬停在放大镜上时才会出现放大镜？

谢谢，

Answer 1

您可以使用悬停在 CSS 中完成这一切，无需 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>