你可能采用组合列表,产品列表,图片列表,当鼠标悬停缩略图时列出你的产品信息显示,这是非常有用的网上销售你的产品。
CSS
li,a,img,ul,div,span {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
.prodlist { list-style: none; margin: 20px; }
.prodlist li {
display: inline-block; position: relative; color: #eee; cursor: pointer; text-shadow: 1px 1px rgba(0,0,0,0.3); margin-bottom: 3%; }
.prodlist li a { color: #FB9337; }
.prodlist li .thumb { padding: 5px; border: 3px solid #ddd; }
.prodlist li .thumb img { width: 225px; }
.prodlist li .content { position: absolute; top: 5px; left: 5px; width: 225px; height: 163px; overflow: hidden; }
.prodlist li .contentinner { background: url(bg.png); padding: 5px 7px; margin-top: 132px; height: 163px; }
.prodlist li .title { color: #fff; font-family:Arial,Helvetica,sans-serif; font-size: 13px; }
.prodlist li .title:hover { color: #FB9337; }
.prodlist li .price { color: #fff; font-weight: bold; float: right; }
.prodlist li .by { font-size: 12px; font-style: italic; margin-top:8px; }
.prodlist li .desc { font-size: 12px; margin: 5px 0; line-height: 16px; } Jquery Code
jQuery(document).ready(function(){
jQuery('.prodlist li').hover(function(){
jQuery(this).find('.contentinner').stop().animate({marginTop: 0});
},function(){
jQuery(this).find('.contentinner').stop().animate({marginTop: '132px'});
});
}); HTML
相关链接