css 实现图片切换效果

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>