鼠标hover的时候出现,离开的时候隐藏的效果。内容会出现闪动

鼠标hover的时候出现,离开的时候隐藏的效果。内容会出现闪动

如果用的是display:none ,display:block显示隐藏的就会有这个问题。因为display为none的时候是不占位置。而显示的时候又占了位置。

所以你可以用opacity

li  .bottom{

     opacity:0;
    filter:alpha(opacity=0);

    border-color:#fff;

}

li{border:1px solid #ffff;}}

li:hover{border:1px solid #333;}//先写一个边框是白色的看不到,在写个hover时有边框。这样不会出现移位

li:hover  .bottom{//bottom指的是下面的那块蓝色的会显示隐藏的区域。必须保证他在li里面,才能这样写哦!!

    opacity: 1;
    filter: alpha(opacity=100);

}