hover()方法:一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
fadeTo()方法:把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
$('.wrap li').hover(function(){
//让鼠标经过的li高亮显示出来,它其他的兄弟元素变暗
$(this).stop().fadeTo(10,1).siblings().fadeTo(10,0.3);
},function(){
$(this).fadeTo(10,1);
})
//鼠标离开大盒子时,全部高亮显示
$('.wrap').mouseleave(function(){
//离开父盒子时,所有li亮起来
$(this).find('li').fadeTo(10,1);
})
用mouseenter/mouseleave事件
css()方法,opacity属性指定了一个元素的不透明度。
$('.wrap li').mouseenter(function(){
//鼠标进入时,li变亮
//让li的所有兄弟透明度降低
$(this).css("opacity",1).siblings().css("opacity",0.3);
})
$('.wrap').mouseleave(function(){
//离开父盒子时,所有li亮起来
$(this).find('li').css("opacity",1);
})