|
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>
| 
转播
