演示效果截图
用到的图片
CSS代码
<style type="text/css">
* {padding:0; margin:0; font:normal 12px "宋体";
text-decoration:none; color:#000;}
a {color:#369;}
a:hover {color:#f00; text-decoration:underline;}
#top5 {width:300px; margin:20px; border-bottom:1px solid #ccc;}
#top5 div {clear:left;
border-top:1px solid #ccc;padding:5px 0 0 15px;
background:#fff url("pucker_1.gif") no-repeat left 5px;}
#top5 #box2 {background-image: url("pucker_2.gif");}
#top5 #box3 {background-image: url("pucker_3.gif");}
#top5 #box4 {background-image: url("pucker_4.gif");}
#top5 .show img {float:left; width:60px; height:85px;
margin:0 5px 5px 0;}
#top5 .show h2 {padding:5px 0;}
#top5 .show p {line-height:150%;}
#top5 .hidden {background-position:left center;
background-color:#ffd;}
#top5 .hidden img {display:none;}
#top5 .hidden p {display:none;}
</style>
JavaScript代码
<script language="javascript">
function pucker_show(name,no,hiddenclassname,showclassname) {
//name:命名前缀
//no:当前鼠标所处对象的序号
//showclassname:展开状态样式名
//hiddenclassname:折叠状态样式名
for (var i=1 ;i<5 ;i++ ){
document.getElementById(name+i).className=hiddenclassname;}
document.getElementById(name+no).className=showclassname;}
</script>
HTML代码
<div id="top5">
<div class="show" id="box1"
onmouseover="pucker_show('box',1,'hidden','show')">
<img src="pucker_img_1.jpg" alt="明朝那些事儿" />
<h2><a href="http://www.865171.cn">明朝那些事儿</a></h2>
<p>作者：当年明月<br />出版社：中国友谊出版社<br />出版时间：2006-9-1</p>
</div>
<div class="hidden" id="box2"
onmouseover="pucker_show('box',2,'hidden','show')">
<img src="pucker_img_1.jpg" alt="别笑,我是英语单词书" />
<h2><a href="http://www.865171.cn">别笑,我是英语单词书</a></h2>
<p>作者：李可<br />出版社：陕西师范大学出版社<br />出版时间：2007-9-1</p>
</div>
<div class="hidden" id="box3"
onmouseover="pucker_show('box',3,'hidden','show')">
<img src="pucker_img_1.jpg" alt="求医不如求己" />
<h2><a href="http://www.865171.cn">求医不如求己</a></h2>
<p>作者：中里巴人<br />出版社：中国中医药出版社<br />出版时间：2007-2-1</p>
</div>
<div class="hidden" id="box4"
onmouseover="pucker_show('box',4,'hidden','show')">
<img src="pucker_img_1.jpg" alt="不生病的智慧" />
<h2><a href="http://www.865171.cn">www.865171.cn</a></h2>
<p>作者：马悦凌<br />出版社：江苏文艺出版社<br />出版时间：2007-8-1</p>
</div>
</div>
