用html中的放大镜鼠标悬停在图像上

I added a magnifying glass for images in my webpage using the following instruction: https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp

The magnified box stays on the image even if the mouse is not over it. How can I revise this in a way that the magnifying glass appears only when the mouse is over it?

Thanks,

You can do this all in CSS using hover, no need for javascript copy the style sheet from below.

<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>

In HTML, there is an event called onmouseleave. You could make the element call a javascript function when your mouse leaves the image. Here's the link for more information: https://www.w3schools.com/jsref/event_onmouseleave.asp Here's the basics of it: onmouseleave="functionName()"

You need to add a onmouseout event to the magnifying glass div and an id to identify it, like this:

  glass = document.createElement("DIV");
  glass.id="glassId";
  glass.setAttribute("onmouseout", "hide()");

Then add a show and hide function like this:

function hide(){
    glass = document.getElementById("glassId").style.display = "none";
}
function show(){
    glass = document.getElementById("glassId").style.display = "block";
}

Finally add the mouseover event to the image itself:

onmouseover="show()"

This will then hide the glass when the mouse leaves the glass (not the image) and show it when the mouse goes back into the image.