html如何添加缩略图,如何使用纯HTML页面上的悬停显示创建缩略图?
这项技术真的很像烟雾和镜子,因为这两个图像都直接编码在页面上。但是,较大的图像通过CSS隐藏,只有当访问者悬停在链接上时才会显示。单击该链接可在新页面中打开全尺寸图像。上图中被编码为:被划分内连接通过CSS自动隐藏
Nebula N90
图片:
#links a img {
height: 0;
width: 0;
border-width: 0;
}
由于所有图像被自动隐藏,有必要显示缩略图作为背景图片在实际链接之外。为了使连结在图像工作,并显示该图像(而不是在它)下文中,有必要包括以下代码:
#links a {
display:block;
padding-top: 110px;
}
的放大图像被显示的链接的光标时上述它是悬停在它上面:
#links a:hover img {
position: relative;
top: -260px;
left: -90px;
height: 240px;
width: 320px;
border-width: 2px;
border-color: #0ff;
}
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
