鼠标悬浮div上移并显示阴影

相对布局：

.list-group li .item {
 margin-right: 16px;
 margin-bottom: 20px;
 position: relative;
 margin-top: 10px;
}

阴影：

 .hotshadow{
 box-shadow: 5px 5px 5px #ccc;
 z-index: 10;
 }

html：

 <ul class="list-group"> 
 #foreach($!sample in $!model)
 <li class="width-5-4">
 <a class="item" href="$!sample.linkUrl" target="_blank" title="$!sample.title">
 ![]($!sample.imageUrl)
 </a>
 </li>
 #end
 </ul> 

js：

<script type="text/javascript">
 $(function(){
 $('.list-group li').mouseover(function(){
 $(this).find('.item').stop().animate({'top':'-20px'});
 $(this).find('.item').addClass('hotshadow');
 });
 $('.list-group li').mouseout(function(){
 $(this).find('.item').stop().animate({'top':'0'});
 $(this).find('.item').removeClass('hotshadow');
 });
</script>

效果图：

Paste_Image.png