html缩略显示信息,jQuery的悬停缩略图的显示产品信息

你可能采用组合列表，产品列表，图片列表，当鼠标悬停缩略图时列出你的产品信息显示，这是非常有用的网上销售你的产品。

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

• 

  $45

  Sony Camera

  By: itzurkarthi.com

  Your product description goes here

相关链接