1.css 代码
*{margin:0;padding:0;} .content{width:980px;margin:0 auto;} .content .ee .tx p{display:block;} .content .ee li p{overflow:auto;display:none;} .content img{display:block;float:left;width:120px;height:80px;} .content span{display:block;float:left;width:180px;margin-left:20px;}
2.html代码
<!DOCTYPE html> <html> <head> <title>css 实现新闻列表鼠标悬浮时显示图片和内容简介</title> <script type="text/javascript" src="jquery.js"></script> <style> *{margin:0;padding:0;} .content{width:980px;margin:0 auto;} .content .ee .tx p{display:block;} .content .ee li p{overflow:auto;display:none;} .content img{display:block;float:left;width:120px;height:80px;} .content span{display:block;float:left;width:180px;margin-left:20px;} </style> </head> <body> <div class="content"> <ul class="ee"> <li> <h1>标题测试</h1> <p> <img src="bg.jpg"> <span>电话：400-682-5515<br/>地址：天津市和平区南京路219号天津中心写字楼9楼 </span> </p> </li> <li> <h1>标题测试</h1> <p> <img src="bg.jpg"> <span>电话：400-682-5515<br/>地址：天津市和平区南京路219号天津中心写字楼9楼 </span> </p> </li> <li> <h1>标题测试</h1> <p> <img src="bg.jpg"> <span>电话：400-682-5515<br/>地址：天津市和平区南京路219号天津中心写字楼9楼 </span> </p> </li> </ul> </div> <script> $('.content ul li').hover(function(){ $(this).addClass('tx').siblings().removeClass('tx')},function(){}); </script> </body> </html>
注意引用jQuery库
