当我们需要给盒子实现鼠标放上去出现边框代码时,很有可能内容会出现BUG。鼠标放上去hover时,border加1px像素边框效果出现BUG,盒子内容会闪动偏移解决办法!
鼠标放上去添加border代码实现:
先放正常问题代码做演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> 宗波尘客-鼠标放上去给盒子增加边框,盒子内容会改变的问题解决办法 </title> <style> * { /* 开启盒模型的内减模式(不懂可以不用管) */ box-sizing: border-box; } .box { /* 居中,不用管这行 */ margin: 100px auto; width: 110px; height: 110px; background: url(./images/index.png) no-repeat center center; } .box:hover { border: 1px solid red; } </style> </head> <body> <div class="box">这个盒子放部分文字内容,然后鼠标放上去出现边框效果。</div> </body> </html>
在此代码中,盒子宽度是固定的,当鼠标放上去时,会给盒子增加1px边框,因此会改变盒子原本大小,所以内容会出现移动(企业开发中,如果开启了内减模式,还有可能文字会换行,原因是内减会使盒子的宽度变小2xp,所以可能会影响到文字的换行问题)
添加边框正确代码实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> 宗波尘客-鼠标放上去给盒子增加边框,盒子内容会改变的问题解决办法 </title> <style> * { /* 开启盒模型的内减模式(不懂可以不用管) */ box-sizing: border-box; } .box { /* 居中,不用管这行 */ margin: 100px auto; width: 110px; height: 110px; background: url(./images/index.png) no-repeat center center; /* 在hover之前就先添加好边框,但是给边框设置一个透明色 */ border: 1px solid transparent; } .box:hover { border-color: red; } </style> </head> <body> <div class="box">这个盒子放部分文字内容,然后鼠标放上去出现边框效果。</div> </body> </html>
解决办法是:
①先给要出现边框的盒子添加一个边框,将边框颜色设置为透明色transparent
②然后将需要hover的元素设置hover
③设置hover只改变边框颜色,border-color:red; 让鼠标放上去后,颜色显示出来