ie6的png背景滤镜

完成专题头图上的分享功能，其中对于ie6的png背景滤镜有了更深刻的体会

功能要求：如下图，

（1）鼠标hover到红色区域时，显示绿色区域；

（2）鼠标离开红色区域，绿色区域隐藏

（3）鼠标停留在绿色区域时，绿色区域不隐藏

（4）鼠标划过蓝色区域时，绿色区域不隐藏

初步方案：

给红色区域按钮增加一个hover（）事件，设置over和out函数，但是只能实现功能1和2，功能3、4都无法实现

中间方案：

给红色区域按钮和绿色区域分别增加一个mouseenter 和 mouseleave 事件，将隐藏绿色区域的函数加上setTimeOut，鼠标停留在绿色区域时clearTimeOut，可以实现所有功能。

代码实现如下

//定时器对象

var flyoutTimer；

//给红色区域绑定事件

$("#cover_share_btn").bind({

mouseenter : showFlyout,

mouseleave : mouseOutEvent

});

//给绿色区域绑定事件

$("#cover_share").bind({

mouseenter : mouseOverEvent,

mouseleave : mouseOutEvent

});

//设置隐藏延迟

function mouseOutEvent() {

flyoutTimer = setTimeout(hideFlyout, share_hide_interval);

}

//取消setTimeOut

function mouseOverEvent() {

clearTimeout(flyoutTimer);

}

//绿色区域的隐藏和显示

function hideFlyout() {

$("#cover_share").hide();

}

function showFlyout() {

$("#cover_share").show();

}

中间有个大插曲，发现在ie6下鼠标hover到红色区域后，绿色区域显示并马上隐藏，查来查去，发现是滤镜的原因，红色区域是个<a>标签，直接给该<a>标签加png背景图片，用滤镜兼容ie6时会使<a>标签失效。

解决方法是：将png背景分离出来即可

最终方案：

在遇到中间方案内的“ie6bug”时，最初以为是setTimeOut的原因，一直解决不出来之后，就决定换一种方法——给红色区域+蓝色区域+绿色区域的父容器绑定hover事件，固定父容器的宽与高同红色区域一样，

这样就可以实现功能1、2、3了，对于功能4的实现，我们可以动态的改变父容器的height值。

代码如下：

//cover_share_btn为父容器的id，cover_share_list为绿色区域的id

$("#cover_share_btn").hover(

function(){

$(this).css("height","46px");

$("#cover_share_list").show();

},

function(){

$(this).css("height","36px");

$("#cover_share_list").hide();

}

);

最终方案与中间方案都可以实现所需功能，且结合css可以兼容ie6，但是最终方案比中间方案的代码简洁明了