Question

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

即使鼠标没有放在图像上，放大的框也会停留在图像上。如何以放大镜仅在鼠标悬停时出现的方式对其进行修改？

谢谢，

Answer 1

你可以使用悬停在CSS中完成所有操作，不需要从下面复制样式表。

<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

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

Answer 3

您需要将一个onmouseout事件添加到放大镜div和一个ID以识别它，如下所示：

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

然后添加一个show和hide函数，如下所示：

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

最后将mouseover事件添加到图像本身：

onmouseover="show()"

当鼠标离开玻璃（而不是图像）时，这将隐藏玻璃，并在鼠标返回图像时显示。

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

3 个答案: