仿天猫商城鼠标移近图片变暗的jquery特效代码

本文从http://www.jqueryba.com/jquery/tmall/tamll.htm而来。

CSS:

body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}ul,ol,li{list-style:none;}input,button{margin:0;font-size:12px;vertical-align:middle;}body{font-size:12px;font-family:Arial, Helvetica, sans-serif; background:url(../images/bg01.gif) repeat-x left top; text-align:center; margin:0 auto;}a{ text-decoration:none;}img{ display:block;}.area01{ width:970px; margin:20px auto;height:300px; border-top:2px solid #000; overflow:hidden;}.box01-tmall{ float:left; width:190px;}/*box-163css*/.box-163css{ width:780px; float:left;position:relative; height:300px;}.box-163css a{ float:left;}.floor-maskItem{ position:absolute; float:left;}.floor-maskItem img{ float:left;}.mask{ position:absolute; left:0; top:0;background:#000; width:195px;height:150px; opacity:0;filter:alpha(opacity=0);}.hover .mask{background:#000;opacity:0.5;filter:alpha(opacity=50); cursor:pointer;}.hover .qq .mask{opacity:0;filter:alpha(opacity=0);}.demo_menu{font-size:14px;text-align:center;margin:10px 0 0 0;color:#999;line-height:180%;}.demo_menu b{color:#333;}.demo_menu a,.demo_menu a:visited{color:#F00;font-size:14px;}.demo_menu a:hover{color:#090;font-size:14px;}

html:

<div class="box-163css">
<a href="http://item.taobao.com/item.htm?id=13437974466" class="floor-maskItem" style="left:0; top:0;"><img src="images/img01.jpg"><div class="mask"></div></a>
<a href="http://item.taobao.com/item.htm?id=14376818116&" class="floor-maskItem" style="left:195px; top:0;"><img src="images/img02.jpg"><div class="mask" style="width:390px;"></div></a>
<a href="http://item.taobao.com/item.htm?id=16011384061" class="floor-maskItem" style="left:0; top:150px;"><img src="images/img03.jpg"><div class="mask"></div></a>
<a href="http://item.taobao.com/item.htm?id=16235528039" class="floor-maskItem" style="left:195px;top:150px;"><img src="images/img04.jpg"><div class="mask"></div></a>
<a href="http://item.taobao.com/item.htm?id=14244803959" class="floor-maskItem" style="left:390px;top:150px;width:195px;"><img src="images/img05.jpg"><div class="mask"></div></a>
<a href="http://item.taobao.com/item.htm?id=16522704023" class="floor-maskItem" style="left:585px; top:0; height:300px;"><img src="images/img06.jpg"><div class="mask" style="height:300px;"></div></a>
</div>

script:

$(function(){
		$(".floor-maskItem").mouseover(function(){
			$(this).addClass("qq").parent().addClass("hover");
		}).mouseout(function(){
			$(this).removeClass("qq").parent().removeClass("hover");
		});
	});