?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style media="all" type="text/css">
body, div, form, img, ul, ol, li, dl, dt, dd, p { margin: 0; padding: 0; border: 0; }
ul, ol { list-style-type:none; }
p { margin:50px; font-size:14px; }
.list { height:272px; width:240px; margin:0 auto; border:1px solid #ebebeb; border-bottom:none; overflow:hidden; }
.list li { height:29px; *height:27px;
padding-left:1em; background: url(http://www.dtonecn.com/test/images/arrow2.gif) no-repeat 1em center; text-indent:1em; border-bottom:1px solid #ebebeb; line-height:26px; font-size:12px; overflow:hidden; }
.list li.hi_pic { height:121px; padding:0; margin:0; overflow:hidden; *margin-top:-6px;
}
.list li.hi_pic img { display:block; height:121px; width:240px; }
.list li span { color:#454545; display:block; background:url(http://www.dtonecn.com/test/images/arrow1.gif) no-repeat right center; margin-right:12px; cursor:pointer; }
.list li span.hover_arrow { background:url(http://www.dtonecn.com/test/images/arrow3.gif) no-repeat right center; }
</style>
</head>
<body>
<ul class="list">
<li><span class="hover_arrow">红花逝，古亭寞</span> </li>
<li class="hi_pic" ><img src="http://www.dtonecn.com/test/images/7.gif" /></li>
<li><span>青酒残，迷梦落</span> </li>
<li class="hi_pic" style="display:none;"><img src="http://www.dtonecn.com/test/images/8.gif" /></li>
<li><span>柳雾散，西风破</span> </li>
<li class="hi_pic" style="display:none;"><img src="http://www.dtonecn.com/test/images/7.gif" /></li>
<li><span>少年空白头，</span> </li>
<li class="hi_pic" style="display:none;" ><img src="http://www.dtonecn.com/test/images/8.gif" /></li>
<li><span>奈何奈何？</span> </li>
<li class="hi_pic" style="display:none;" ><img src="http://www.dtonecn.com/test/images/7.gif" /></li>
</ul>
</body>
<script type="text/javascript" src="http://www.dtonecn.com/test/js/jquery-1.4.2.min.js" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(".list span").mouseover(function() {
if ($(this).attr("class") != "hover_arrow") {
$(".hi_pic:visible").hide();
$("span.hover_arrow").removeClass("hover_arrow");
$(this).attr("class", "hover_arrow");
$(this).parent().next().fadeIn();
}
});
</script>
</html>
?