纯css制作网页轮播图

最新推荐文章于 2024-04-15 10:28:24 发布

Lee_yoki

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/Lee_yoki/article/details/24535525

版权

<html>
<head>
<title></title>
<style type="text/css">
a{text-decoration: none;}
.hoverbox{cursor: default;list-style: none;}
.hoverbox a .preview{display: none;}
.hoverbox a:hover .preview{display: block;position: absolute;top: 75px;left: 0px;z-index: 1;}
.hoverbox img{width: 100px;height: 75px;}
.hoverbox li{color: inherit;display: inline;float: left;position: relative;}
.hoverbox .preview{border-color: #000;width: 500px;height: 350px;}
</style>

</head>
<body>
<ul class="hoverbox">
<li>
<a href="#"><img src="1.jpg" /><img src="1.jpg" class="preview" /></a></li>
<li>
<a href="#"><img src="2.jpg" /><img src="2.jpg" class="preview" style="margin-left:-100px;"/></a></li>
<li>
<a href="#"><img src="3.jpg" /><img src="3.jpg" class="preview" style="margin-left:-200px;"/></a></li>
<li>
<a href="#"><img src="4.jpg" /><img src="4.jpg" class="preview" style="margin-left:-300px;"/></a></li>
<li>
<a href="#"><img src="5.jpg" /><img src="5.jpg" class="preview" style="margin-left:-400px;"/></a></li>
<li>
</ul>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lee_yoki

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯css制作网页轮播图

a{text-decoration: none;}.hoverbox{cursor: default;list-style: none;}.hoverbox a .preview{display: none;}.hoverbox a:hover .preview{display: block;position: absolute;top: 75px;left: 0px;z-index:
复制链接

扫一扫