html如何添加缩略图,如何使用纯HTML页面上的悬停显示创建缩略图?

这项技术真的很像烟雾和镜子,因为这两个图像都直接编码在页面上。但是,较大的图像通过CSS隐藏,只有当访问者悬停在链接上时才会显示。单击该链接可在新页面中打开全尺寸图像。上图中被编码为:被划分内连接通过CSS自动隐藏

图片:

#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;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值