页面批量使用类似hover效果时,内容闪烁

使用mouseenter+mouseleave,划过显示,滑出隐藏。内容过多出现滚动条时,有时候会出现内容闪烁的问题。

1.原因:
用display实现显示隐藏是占位的,display为none的时候是不占位置,而显示的时候又占了位置。尤其出现滚动条以后,更容易出现闪动的bug。

划过显示相应的信息框,滑出隐藏。

页面批量使用类似hover效果时,内容闪烁
页面批量使用类似hover效果时,内容闪烁
2、解决:
换为opacity控制显示,因为opacity不占位,不会影响滚动条的位置。

.hide{opacity:0;filter:alpha(opacity=0);}
.show{opacity:1;filter:alpha(opacity=100);}

但是还存在一个问题就是:只有当要显示隐藏的dom结构是定位实现的时候,就是也是不占位的结构才可以这么解决。
占位的结构还是有问题,这个还在解决中。