当前第2页 返回上一页
利用CSS实现图片重叠,当鼠标悬浮到第一张图片的时候,第二张图片会显示出来。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >图片重叠</ title >
< style >
ul li {
position: relative;
float: left;
}
ul li #play {
position: absolute;
width: 150px;
height: 100px;
margin-top: 85px;
margin-left: 78px;
display: none;
}
ul li #yuan {
position: absolute;
width: 300px;
height: 300px;
margin-left: 0px;
margin-top: 0px;
}
ul li #yuan:hover +#play {
display: block;
}
</ style >
</ head >
< body >
< ul >
< li >
< img id = "yuan" src = "img/ia_100000165.jpg" >
< img id = "play" src = "img/ia_100000164.jpg" >
</ li >
</ ul >
</ body >
</ html >
|
效果图:
(学习视频分享:css视频教程)
以上就是css如何重叠图片的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
css如何实现图片堆叠效果
css该如何去掉背景颜色呢
css的+(加号)选择器怎么用
css实现聚光灯效果的代码分享
如何删除内联或内联块元素之间的间隙
html5 border属性怎么设置?html5 table中的border属性介绍
css中的流式布局是什么意思
详解css中优先级和stacking context等高级特性,带你更深入了解css!!
css如何制作饼状图
css类选择符用什么表示?
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何重叠图片