我正在开发一个镀铬扩展,在任何悬停在图像上时,它应该在图像上弹出一个框,图像应该缩放到原始图像的1.5倍.
所以我开始研究示例,并找到了类似的示例.
所以我开始研究示例,并找到了类似的示例.
.zoomin img {
height: 200px;
width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.zoomin img:hover {
width: 300px;
height: 300px;
}
<div class="zoomin"> <img src="http://www.corelangs.com/css/Box/img/zimage.png" title="All you need to kNow about CSS Transitions " /> </div>
但相反,我需要创建一个框,而不会在悬停时缩放图像.所以在我使用这个Using only CSS,show div on hover over <a>的练习中,我已经开发了这个.
main.js
div {
display: none;
}
img:hover + div {
display: block;
height : 200px;
width : 300px;
}
但问题是应根据我们悬停的图像动态调整图像的大小.
当我们将鼠标悬停在图像上时,是否有办法使其工作,它应该自动生成一个div,该div应该保持图像尺寸的1.5倍.任何建议.请帮助
我在下面列出了截图供参考.
解决方法
img:hover div {
display: block;
var img = document.getElementById('imageid');
// get the image dimensions using this id
var width1 = img.clientWidth;
var height1 = img.clientHeight;
height : width * 1.5;
width : height * 1.5;
}