QQ空间模板取舍特效
QQ空间模板选择特效
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<style>
*{margin:0; padding:0; font-size:12px; line-height:150%}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#wrap{ width:900px; margin:0 auto; height:200px;}
.good_list{ padding:50px 0 30px 13px; width:870px; background:#f8f8f8; border:1px solid #eaeaea; margin:50px auto 0 auto; overflow:hidden; height:400px;}
.item{ float:left; margin:13px 13px 0 0; position:relative; z-index:0; width:200px; height:120px;}
.good{ padding:8px;width:184px; height:104px;}
.goodOp{ padding:2px; border:1px solid #a8a8a8; width:180px; height:100px; background:#fff; font-size:0}
.goodHover{ padding:0px; position:absolute; z-index:1; top:-40px; left:-4px; width:210px; height:204px; display:none;}
.goodHd{ background:url('http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/imgHover.png'); width:210px; height:204px;}
.goodHd h2{ font-size:12px; text-align:center; padding-top:12px}
.goodHd p{ color:#9c9c9c; text-align:center}
.goodHd .img{ padding-left:12px;}
</style>
<script>
$(function(){
$("#list>.item").hover(function(){
$(this).css('z-index','101').find(".goodHover").show().css('z-index','100');
},function(){
$(this).css('z-index','0').find(".goodHover").hide().css('z-index','0');
});
});
</script>
</head>
<body>
<div id="wrap clearfix">
<div class="good_list" id="list">
<div class="item">
<div class="good">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>西班牙</h2>
<p>点击图片预览装扮</p>
<div class="img">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="good">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>西班牙</h2>
<p>点击图片预览装扮</p>
<div class="img">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="good">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>西班牙</h2>
<p>点击图片预览装扮</p>
<div class="img">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="good">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>西班牙</h2>
<p>点击图片预览装扮</p>
<div class="img">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="good">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>西班牙</h2>
<p>点击图片预览装扮</p>
<div class="img">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="good">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>西班牙</h2>
<p>点击图片预览装扮</p>
<div class="img">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="good">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>西班牙</h2>
<p>点击图片预览装扮</p>
<div class="img">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="good">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
<div class="goodHover">
<div class="goodHd">
<h2>西班牙</h2>
<p>点击图片预览装扮</p>
<div class="img">
<div class="goodOp"><img src="http://websalon.cn/miaov/%E4%BB%BFqq%E7%A9%BA%E9%97%B4%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/57710_2.gif"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>