<ul>
<li>
<p>1</p>
<img src='xxx.jpg'/>
</li>
<li>
<p>2</p>
<img src='xxx.jpg'/>
</li>
<li>
<p>3</p>
<img src='xxx.jpg'/>
</li>
<li>
<p>4</p>
<img src='xxx.jpg'/>
</li>
</ul>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
xxxxxxxxxx
*{margin:0;padding:0;}
ul{
margin:50px auto;
width:100px;
}
li{
list-style:none;
border:1px solid #000;
padding:10px;
margin-top:-1px;
}
img{
margin-top:10px;
display:none;
width:100%;
height:120px;
}
li.on img{
display:block;
}
$('ul li').eq(0).addClass('on');
$('ul li').hover(function(){
$(this).addClass('on').siblings().removeClass('on')
})