Mouse over the image with magnifying glass in html

Question

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,

Answer 1

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>

Answer 2

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()"