对点击卡片，hover设置border，出现抖动和div走位问题，解决方法

最新推荐文章于 2024-04-30 17:36:32 发布
最新推荐文章于 2024-04-30 17:36:32 发布
阅读量779 收藏 1
点赞数 5
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cu50moon/article/details/136176326
版权
本文探讨了网页布局中出现的抖动问题，原因在于broder的变化导致元素重绘。提供了三种解决方案：透明边框、padding对冲以及使用outline来定义轮廓，后者不占空间，适用于鼠标hover和选中效果的一致性处理。
摘要由CSDN通过智能技术生成
抖动问题原因：设置的broder改变当前元素布局，会挤压空间，所以造成了抖动（因位置变化而出现的重绘现象），解决方法分为两种，一是改变元素本身大小，二是不更改布局，显示样式。

1.透明broder，对元素本身设置与目标broder宽度一致的透明边框

border:1px solid transparent;

2.padding，broder 对冲，设置和目标broder宽度一致的padding，之后当hover时重置

以上两种方法都没有办法解决，鼠标hover和选中元素的broder宽度不一的问题

3.outline，

outline 表示元素的轮廓，语法与border属性十分类似，分width、style和color。支持的关键字和属性与border属性一致，radio也适用

此属性与border存在一个重大的区别：outline不占据任何空间。

outline: 2px solid #3291fe;
outline-offset: -2px;

将偏移设置为目标宽度一样即可

Cuprumfifth
关注
CSS设置样式时，鼠标移动到div上，发生抖动问题解决办法
Einstellung的博客
03-11 3592
出现抖动现象背后的原因 比如你可能会遇到这样的场景，就是有一个div块，当鼠标悬浮的时候，需要添加一个border（比如多个div块以卡片的形式排列起来）。你可能会考虑写成这样的CSS： div:hover { border: 1px solid blue } 但是这样写会导致一个问题，就是div块之间比如说间距是3px，这时候加了一个border，间距可能会变成4px。div块之间间距突然拉大（比如说那种多个卡片场景），从视觉上来看就好像页面的div块间发生了抖动。你可能会考虑使用box-sizing:
解决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 {
19-解决元素的hover属性引起的页面抖动问题
我们的目标是星辰大海！
04-30 451
19-解决元素的hover属性引起的页面抖动问题
css 对div用hover设置border，出现抖动和div走位问题，解决方法
热门推荐
qq_38932936的博客
08-02 1万+
样式设置 ： div:hover { border:1px solid red;} 当鼠标移动到div时，产生抖动和偏移。 产生的原因： 是因为设置border时设置了1px边框，多出的这1px，与其它元素产生了挤压， 导致div偏移。 解决方法： 第一种方法：是先将这个div设置一个跟背景颜色一样的边框，比如背景颜色为#aaa；那么你先设置这个d...
给li动态添加border，兄弟元素会抖动的解决方案
weixin_43452622的博客
12-04 1026
li { border: 2px solid transparent; // 先写上border进行占位，这样就可以防抖动。transparent为透明色 } // 动态添加border .active-li { border-top: 2px solid; border-right: 2px solid #067fe2; border-bottom: 2px solid; ...
盒子添加：hover属性时内容出现抖动（原因和解决办法）
2201_75935630的博客
10-08 1153
想要设置盒子添加：hover属性时就显示边框的效果，但盒子里的内容会出现明显的抖动。由属性引起，当一个盒子使用了属性，不管你设置边框、内边距，都是计算在盒子的宽高内，所以由于：hover属性突然插入一个border就会导致盒子里的内容重新调整位置，而出现视觉上的抖动。
css3动画效果抖动解决方法
09-22
将高度设置为和`div`初始状态相同的20%，而不是0%，这样在鼠标滑过时，即使`div`的高度瞬时变为0%，由于鼠标仍然在元素内部，hover事件依旧可以触发，动画可以顺利过渡到`to`状态，从而避免了抖动现象。 除了手动...
多行排列图片时hover上去加边框挤图片的解决方法兼容IE7+
09-25
解决这个问题的方法相对简单，一种是直接针对图片设置`border:none`。这样可以去除图片默认的边框，使得hover时增加的边框不会导致其他元素的移动。例如： ```css img { border: none; } ``` 然后在hover状态下...
css鼠标移入盒子添加border时发生抖动
NewBie96的博客
05-11 550
当鼠标移入一个盒子时,需要给盒子添加一个1px的border的边框。
使用hover时，鼠标放在上面移动时会不停的触发和闪动
qq_43484520的博客
10-27 2235
项目场景： 提示：这里简述项目相关背景： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述： 鼠标移入div1的时候显示div2的内容，移出时 @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原因分析..
select因为选中而造成的样式上下浮动
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
05-22 549
为了说明问题，我也找不到合适的录屏工具，然后就用最笨的方法用手机拍出来的，不过这样也直观些吧 先看下原来的效果，有没有看到上下浮动？ 出现这种情况，肯定很无语啊，然后就找度娘，还真找到了解决办法 <div style="float: left;padding-top: 20px;"> <el-select v-model="city" placeholder="请选择" @focus="initHome" value="1" style="wi..
解决div用hover设置border时出现抖动的问题
m0_46219714的博客
12-14 1295
第一步：将这个div的border颜色设置为透明 div {border:1px solid transparent;} 第二步：引入hover动作 div:hover { border:1px solid #ccc;}
解决盒子鼠标悬浮加边框导致里面元素位置抖动
weixin_55253195的博客
09-18 220
如图，在鼠标悬浮到元素上时，里面元素位置发生了抖动，很影响观感。给悬浮出现边框的盒子提前加上一个透明边框，把位置先占着就可以了。如何不想因为边框而改变原来盒子大小，可以加上一句。
input输入字体时抖动
疑问 搜索 动手 解决 记录
01-13 2047
问题描述 1. input输入字体时框内元素会整体下移一像素 也就是 1px 2. 目前全局字体大小是16px label字体大小也是16px ,相同,理论上讲不应该出现此问题. 代码 <div class="sign_login mb20"> <span>账号：</span> <input class="pl10"> <sp
前端三件套之css(4) 边框调整和浮动
qq_62102968的博客
02-25 1846
目录边框属性边框调整背景与透明度背景透明度溢出继承性浮动 浮动范围高度塌陷边框属性格式 例如： 当然直接打border是全部四周都会变化。像以下代码段，就是可以只调整一边而不是全部 边框调整 还是刚才这个图，在网页中按F12打开终端，选择第一个容器。按照刚才的代码，我们只设置了容器大小和边框属性。所以在终端中也只显示这两点。内边距存在的意义就是让边框和容器中的问题之间有一段距离。而外边距存在的意义就是让两个相邻容器之间存在一定的距离。 当然，内外边距也是有top，bottle等属性。如果
:hover时设置边框border出现抖动异常
有趣的小良的博客
10-16 327
地出现边框效果，但实际情况却是元素出现了。在开发过程中，给 div 添加以下样式。，影响了用户体验和页面的美观度。在div元素上时（执行。主要有两个原因，分别是。
解决hover显示边框时发生抖动的问题
hst_gogogo的博客
06-04 1万+
当我们用 :hover 选择器的时候，如果要给鼠标滑过的元素加上边框或者加粗边框的时候，有可能会发生抖动现象（甚至有可能会挤走下面的元素），见下图： 解决方法： 方法一：提前加边框。给元素加上 n像素（想要hover的时候显示多少像素边框就加多少像素） 的和背景色一样的边框（或者干脆将border的透明度为0，eg: border:1px solid rgba(100,100,100,0)...
进阶选择器、元素特性的总结、浮动以及浮动解决办法
yangyanqin2545的博客
11-08 136
选择器进阶 后代元素选择器 空格连接 E F{} 选择E元素中所有的后代F元素（E元素结构包含所有F选择器） .box p{ background-color:green; } .box ul li p{ color:red; } 子代元素选择器 大于号连接 E>F{ } 选择的是E元素中的直接子元素F(结构上第一层级) .box > p{ background-color:green; } 群组选择器（并集） 【逗号】分隔 一组拥有相
一个div怎么同时设置hover和点击事件
最新发布
09-13
在一个HTML `<div>`元素上同时设置鼠标悬停（`hover`）和点击（`click`）事件通常有两种方法： 1. **纯CSS实现（仅限于视觉效果）**: 对于简单的视觉反馈，你可以使用CSS伪类`:hover`和`:active`。例如： ```html <style> .myDiv { background-color: initial; transition: background-color 0.3s ease; } .myDiv:hover { background-color: lightblue; } .myDiv:active { background-color: darkblue; } </style> <div class="myDiv">Hover me and click</div> ``` 这里 `.myDiv:hover` 设置鼠标悬停时背景色变浅蓝，`.myDiv:active` 则设置鼠标按下时背景色变深蓝。注意这只会改变视觉效果，不是真正的交互。 2. **JavaScript实现（实际交互）**: 如果需要复杂的交互逻辑，比如延迟效果、计数等，可以利用JavaScript的`addEventListener`方法： ```javascript const myDiv = document.querySelector('.myDiv'); myDiv.addEventListener('mouseover', function() { // 鼠标悬停时执行的函数 this.style.backgroundColor = 'lightblue'; }); myDiv.addEventListener('mouseout', function() { // 鼠标离开时恢复原状 this.style.backgroundColor = ''; }); myDiv.addEventListener('mousedown', function() { // 鼠标按下时执行 this.style.backgroundColor = 'darkblue'; }); myDiv.addEventListener('mouseup', function() { // 鼠标抬起时恢复原状 this.style.backgroundColor = ''; }); ``` 上述代码中，`mouseover` 和 `mouseout` 用于处理悬停，`mousedown` 和 `mouseup` 分别处理点击开始和结束。 记得将`.myDiv`替换为你实际的元素ID或类名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值