:hover 加入边框导致盒子抖动问题解决方法

最新推荐文章于 2024-04-30 17:36:32 发布
最新推荐文章于 2024-04-30 17:36:32 发布
阅读量512 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61843988/article/details/126068157
版权

CSS hover 边框抖动 透明边框 用户体验
关键词由CSDN通过智能技术生成

【现遇到问题如下】

本身盒子无边框，启用:hover之后会加上2px的红色边框，这时候对外显示的效果是盒子整体出现抖动现象

如图所示：

 

【解决方法】

在一开始的时候给这个盒子加上边框，边框颜色设置为透明色或者设置与背景色一样的颜色，这样一来，鼠标经过这个盒子不会在出现抖动现象。

效果如图所示:

 

 

小媛同学.，
关注
大前端学习笔记--持续随缘更新
JackieDYH的博客
02-10 1207
目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko Safari苹果——苹果...
CSS设置样式时，鼠标移动到div上，发生抖动问题解决办法
Einstellung的博客
03-11 3535
出现抖动现象背后的原因 比如你可能会遇到这样的场景，就是有一个div块，当鼠标悬浮的时候，需要添加一个border（比如多个div块以卡片的形式排列起来）。你可能会考虑写成这样的CSS： div:hover { border: 1px solid blue } 但是这样写会导致一个问题，就是div块之间比如说间距是3px，这时候加了一个border，间距可能会变成4px。div块之间间距突然拉大（比如说那种多个卡片场景），从视觉上来看就好像页面的div块间发生了抖动。你可能会考虑使用box-sizing:
伪类:hover对边框使用出现盒子抖动的解决办法
qq_46545062的博客
08-01 505
伪类:hover对边框使用出现盒子抖动的解决办法
:hover 添加边框 抖动问题
小米粒的博客
10-22 1132
原因：设置border时设置了N px边框，多出的这 2N px，与其它元素产生了挤压， 导致div偏移 解决：1.提前设置透明的 1px 的边框 li {border:1px solid transparent} 2.可以 提前设置 padding（多加border值）提前占位 ...
css鼠标移入盒子添加border时发生抖动
NewBie96的博客
05-11 535
当鼠标移入一个盒子时,需要给盒子添加一个1px的border的边框。
解决盒子鼠标悬浮加边框导致里面元素位置抖动
weixin_55253195的博客
09-18 202
如图，在鼠标悬浮到元素上时，里面元素位置发生了抖动，很影响观感。给悬浮出现边框的盒子提前加上一个透明边框，把位置先占着就可以了。如何不想因为边框而改变原来盒子大小，可以加上一句。
hover效果加边框不抖动
u012337009的专栏
07-19 7672
前两天遇到一个hover效果给整个div加边框的问题。 html 如下 <div class="hot-recommend"> <div class="wrapper"> <div class="offer-list"> <ul class='underline'> <li class=
HTML hover字体加粗会变大 会抖怎么解决
weixin_41033048的博客
02-24 2421
li { display: inline-block; font-size: 0; } li a { display:inline-block; text-align:center; font: normal 16px Arial; text-transform: uppercase; } a:hover { font-weight:bold; } a::before { display: block; content: attr(ti
web前端入门到实战：前端高手在CSS 开发效率的必备片段
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-01 281
这篇文章会记录我们平时常用到的 CSS 片段，使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的，墙裂建议点赞收藏再看，方便日后查找 清除浮动 浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也是兼容性最好的一种是，在同级目录下再创建一个；不过这样会增加很多无用的代码。此时我们用:after这个伪元素来解决浮动的问题，如果当前层级有浮动元素，那么...
前端H5最全面试题
qq_59082106的博客
01-08 2127
HTML/CSS: 对web标准的理解(结构/表现/行为)、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系、常用属性、布局、 选择器、权重、盒模型、Hack、CSS预处理器、Flexbox、CSS Modules、Document flow、BFC、HTML5（离线&储存&history、多媒体、webGL、SVG、Cavas） Javascript： 数据类型、运算、对象、function、继承、闭包、作用域、事件、prototype、RegExp、JSON、Ajax、
解决hover生成border造成的元素移动方法
12-14
前言 我们有时候会遇到 hover 伪类给元素添加边框的时候，元素中的内容发生位移，虽然我们设置了 box-sizing: border-box 并且规定了元素的宽高，但是内容依然被边框挤开了。如下面这种情况： <style type="text/css" media="screen"> .test { height: 30vmin; width: 30vmin; background: lightblue; box-sizing: border-box; } .test:hover {
解决加入边框盒子抖动问题
weixin_54443782的博客
07-28 397
解决加入hover事件盒子抖动问题
hover加边框或边框加粗元素不抖动
lzf的博客
04-24 3875
hover加边框或边框加粗元素会抖动
css 解决盒子移动鼠标丢失产生的抖动问题
weixin_30696427的博客
09-03 255
例如： 一个div，鼠标悬浮希望div上移，鼠标离开div归位。 如果直接给div添加hover事件，div会上下抖动。 解决方法是给div添加一个父元素： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v...
：hover 加边框导致盒子抖动的解决办法
liuyuqing0414的博客
04-15 2093
【现遇到问题如下】 本身盒子无边框，启用：hover之后加上1px的边框，这时候对外显示的效果是盒子整体出现抖动。 【原因】 box-sizing: border-box; css3盒子模型的特性决定了：盒子宽高已定的情况下，后续加上边框和padding并不会改变盒子最初的大小。 因此，盒子大小不变，新加上的边框只会挤压盒子内部内容物的空间，从而再度调整内容排列。 【解决办法】 在一开始的时候就给盒子加上边框，边框颜色设置为透明，这样一来，鼠标经过前后盒子内容的空间都是一致的。 .sk_co
盒子添加：hover属性时内容出现抖动（原因和解决办法）
2201_75935630的博客
10-08 1093
想要设置盒子添加：hover属性时就显示边框的效果，但盒子里的内容会出现明显的抖动。由属性引起，当一个盒子使用了属性，不管你设置边框、内边距，都是计算在盒子的宽高内，所以由于：hover属性突然插入一个border就会导致盒子里的内容重新调整位置，而出现视觉上的抖动。
CSS鼠标hover给元素加边框后发生移动
Martin 的博客
03-27 5293
CSS鼠标划过给元素加边框后发生晃动解决方法：默认给所有元素加上边框鼠标hover时改变div的width和height只需减去边框大小使用box-sizing属性改变div盒子模型的规则 =》 具体自搜...
19-解决元素的hover属性引起的页面抖动问题
最新发布
我们的目标是星辰大海！
04-30 381
19-解决元素的hover属性引起的页面抖动问题
解决hover显示边框时发生抖动的问题
hst_gogogo的博客
06-04 9903
当我们用 :hover 选择器的时候，如果要给鼠标滑过的元素加上边框或者加粗边框的时候，有可能会发生抖动现象（甚至有可能会挤走下面的元素），见下图： 解决方法： 方法一：提前加边框。给元素加上 n像素（想要hover的时候显示多少像素边框就加多少像素） 的和背景色一样的边框（或者干脆将border的透明度为0，eg: border:1px solid rgba(100,100,100,0)...
用css给盒子:hover后加上阴影效果
06-01
可以使用 CSS 的 `:hover` 伪类选择器来为鼠标悬停时的盒子添加阴影效果。当鼠标悬停在盒子上时，使用 `box-shadow` 属性给盒子添加阴影即可。 下面是一个示例代码，实现了鼠标悬停时给盒子添加阴影效果： ```html...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值