我使用以下指示在网页中为图像添加了放大镜:
https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp
即使鼠标不悬停在图像上,放大的框仍会停留在图像上。我该如何修改代码,使放大镜只在鼠标悬停在图像上时出现?
谢谢。
谢谢。
<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>
onmouseleave="functionName()"
`
magnify("myimage", 3);function normalImg(x) {
x.style.width = "100%";
}
</script><div class="img-magnifier-container">
<img id="myimage" onmouseleave="normalImg(this)" src="img_fjords.jpg" width="100%">
</div>`
但它没有起作用。上面的代码有什么问题吗? - Mohammad您需要为放大镜div添加一个onmouseout事件,并为其添加一个id进行标识,像这样:
glass = document.createElement("DIV");
glass.id="glassId";
glass.setAttribute("onmouseout", "hide()");
function hide(){
glass = document.getElementById("glassId").style.display = "none";
}
function show(){
glass = document.getElementById("glassId").style.display = "block";
}
onmouseover="show()"