北大青鸟web培训之css hover内容抖动

当你在学习web前端中的html5与css的时候，如果遇到的主要问题是hover后文字抖动，并且他们的边框不能完美的覆盖之前每个div下部的分割线。要怎么办呢?下面北大青鸟web前端培训小编就和大家分享解决方案：

1遮挡分割线，整个加hover的div上移1px。

解决办法：

1.给父容器box加overflow:hidden;属性

2.父容器box加border除none以外的属性

3.用父容器box的padding-top代替margin-top，以上就是广州北大青鸟web学校中关于css hover内容抖动解决技巧知识，

2解决抖动问题，减少div的height。

方向是这两个，但是.first-list的margin上移带来了其他问题，就是虽然高度设了，但hover时还是会向下掉1px。

这个问题找了好久，发现原来外层div margin为负时，并不会把这个div块都带着移动，里层的li就没有跟着移动，所以北大青鸟培训小编出现了怎么调都还是会看到div块向下抖动的问题，并且下边框还出现了遮住1px的问题。问题是ul层也没有设置overflow：hidden。

后来想到了给li用一个margin：-1px。两个问题一起解决啦。不过下边框被遮住的应该是是因为div设置的高度值问题。

其实有种比较简单的解决方法，那就是hover之前给div加白色边框占位，hover改变border颜色。这样很简单，但是广州tmll5培训小编觉得不够通用，在这里就用不了，因为页面上有一个div的左上角有一个背景图片，白色的边框会在上面留下痕迹。没办法用。