首页 > 好文分享 > 技术教程内容详情
广州信息网
久久优惠网

css对div用hover设置border出现抖动和div走位问题 解决方法

2022-05-05 00:05:26 技术教程

样式设置 : div:hover { border:1px solid red;} 当鼠标移动到div时,产生抖动和偏移。


产生的原因: 是因为设置border时设置了1px边框,多出的这1px,与其它元素产生了挤压, 导致div偏移。


解决方法:

第一种方法:是先将这个div设置一个跟背景颜色一样的边框,比如背景颜色为#aaa;那么你先设置这个div的样式:div {border:1px solid #aaa;},然后再设置hover动作,div:hover { border:1px solid red;} 。

 

第二种方法:将这个div的border颜色设置为透明
div {border:1px solid transparent;},然后再引入hover动作div:hover { border:1px solid red;} 。

相关标签: hover border CSS div

发布评论