html鼠标经过有遮罩层,jQuery实现鼠标滑过遮罩并高亮显示效果

鼠标滑过遮罩高亮效果

*{padding:0;margin:0;}

ul,li{list-style:none;}

.picshow{float:left;padding:4px 0;width:760px;position:relative;}

.picshow li{float:left;height:160px;width:190px;background:http://www.875.cn/000;opacity:0.9;}

.picshow li img{height:160px;width:190px;}

.picshow li a{display:block;}

$(function() {

var conAry = $("[name=h_light]");

conAry.each(function(){

var $this = $(this);

var els = $("a", $this);

els.each(function(){

var el = $(this);

el.mouseover(function() {

els.css({ "opacity": 0.6});

el.animate({ "opacity": 0.9 });

});

});

$this.mouseout(function() {

els.css("opacity", 1);

});

});

});

• 
• 
• 
• 
• 
• 
• 
• 

效果图如下：