用html中的放大鏡鼠標懸停在圖像上

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 ： onmouseleave="functionName()"以下是它的基礎知識： 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()"

這將在鼠標離開玻璃（而不是圖像）時隱藏玻璃，並在鼠標返回圖像時顯示。