css 实现图片切换效果

来源：互联网发布：js新建一个json对象编辑：程序博客网时间：2024/06/05 18:10

1、html

<div class="content"><ul class="ee"><li><a href="#con1">标题1</a><p id="con1"><img src="bg1.jpg"></p></li><li><a href="#con2">标题2</a><p id="con2"><img src="bg2.jpg"></p></li><li><a href="#con3">标题3</a><p id="con3"><img src="bg3.jpg"></p></li></ul></div>

2.、css

*{margin:0;padding:0;}ul li{list-style-type:none;}.content{width:680px;margin:0 auto;padding: 50px 0;}.content .ee{position:relative;height:224px;}.content .ee li p{overflow:auto; position:absolute;top:0;left:0;z-index:1;opacity:0;-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}.content .ee li #con1{opacity:1;}.content .ee li #con1:target{z-index:2;opacity:1;}.content .ee li #con2:target{z-index:2;opacity:1;}.content .ee li #con3:target{z-index:2;opacity:1;}.content img{display:block;float:left;width:400px;height:244px;}.content span{display:block;float:left;width:180px;margin-left:244px;}.content a{position:absolute;left:430px;top:1px;}.content .ee li:nth-child(2) a{top:35px;}.content .ee li:nth-child(3) a{top:65px;}

3.完整代码

<!DOCTYPE html><html><head><title>css 实现新闻列表鼠标悬浮时显示图片和内容简介</title><script type="text/javascript" src="jquery.js"></script><style>*{margin:0;padding:0;}ul li{list-style-type:none;}.content{width:680px;margin:0 auto;padding: 50px 0;}.content .ee{position:relative;height:224px;}.content .ee li p{overflow:auto; position:absolute;top:0;left:0;z-index:1;opacity:0;-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}.content .ee li #con1{opacity:1;}.content .ee li #con1:target{z-index:2;opacity:1;}.content .ee li #con2:target{z-index:2;opacity:1;}.content .ee li #con3:target{z-index:2;opacity:1;}.content img{display:block;float:left;width:400px;height:244px;}.content span{display:block;float:left;width:180px;margin-left:244px;}.content a{position:absolute;left:430px;top:1px;}.content .ee li:nth-child(2) a{top:35px;}.content .ee li:nth-child(3) a{top:65px;}</style></head><body><div class="content"><ul class="ee"><li><a href="#con1">标题1</a><p id="con1"><img src="bg1.jpg"></p></li><li><a href="#con2">标题2</a><p id="con2"><img src="bg2.jpg"></p></li><li><a href="#con3">标题3</a><p id="con3"><img src="bg3.jpg"></p></li></ul></div></body></html>

0 0