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庫