CSS设置样式时,鼠标移动到div上,发生抖动问题解决办法
出现抖动现象背后的原因
比如你可能会遇到这样的场景,就是有一个div块,当鼠标悬浮的时候,需要添加一个border(比如多个div块以卡片的形式排列起来)。你可能会考虑写成这样的CSS:
div:hover {border: 1px solid blue
}
但是这样写会导致一个问题,就是div块之间比如说间距是3px,这时候加了一个border,间距可能会变成4px。div块之间间距突然拉大(比如说那种多个卡片场景),从视觉上来看就好像页面的div块间发生了抖动。你可能会考虑使用box-sizing: border-box
来解决这个问题,这个时候如果content里没有东西还好,如果有内容,突然增加的border也会导致内容发生一点抖动现象。
对于这个抖动问题的解决原则就是让各个块或者内容之间的距离始终保持不变,距离不变就不会发生抖动。如何让距离保持不变呢?可以先用transparent
这个特性来做一个占位。
一个简单场景
简单场景是之前没有border,悬浮或者点击之后添加border。可以写成这样:
div {border:1px solid transparent;}
div:hover { border:1px solid red;}
更复杂的场景
现在考虑一个更复杂的场景,刚开始有一个边框是1px,你希望鼠标悬浮之后边框变成3px。比如类似于这样,要求边框是有圆角的:
这时候就没有办法通过transparent来解决这个问题了,因为边框是始终存在的,只是粗细发生了变化。这个问题的一个比较容易的解决方案是通过box-shadow
来构造多重边框,对于内部边框先transparent,然后鼠标悬浮时再显示。特别的在MDN文档中有这么一段内容:
If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners.
所以,我们用box-shadow时并不需要担心圆角问题,它会继承过来。考虑使用inset,像这样:
如果想在之前的边框里面加一个边框,做成多重边框,可以写成这样:
box-shadow: inset 0 0 0 10px gold;
最后,你只需要将内边框提前设置好,并将颜色设置为transparent,当鼠标悬浮时将其设置为和外边框一样的颜色,就可以解决抖动问题了。
参考资料
[1] css 对div用hover设置border,出现抖动和div走位问题,解决方法
[2] box-shadow
[3] CSS3实现多重边框的方法总结
CSS设置样式时,鼠标移动到div上,发生抖动问题解决办法相关推荐
- css怎样使鼠标移到div上显示手型
新建一个html文件,命名为test.html,用于讲解css怎样使鼠标移到div上显示手型. 在test.html文件内,创建一个div模块,下面将使用css设置该div的样式,实现鼠标移到div上 ...
- CSS超链接样式和鼠标样式
文章目录 CSS超链接样式和鼠标样式 超链接样式 超链接伪类 简化超链接样式 鼠标样式 浏览器鼠标样式 自定义鼠标样式 CSS超链接样式和鼠标样式 超链接样式 超链接伪类 语法 a:link {} a ...
- html怎么设置img样式,img 元素可以用 CSS 设置样式吗?
img 元素可以用 CSS 设置样式吗? img 元素可以用 CSS 设置样式. 下面本篇文章介绍一下 CSS 对于 < img > 图片的常见操作. 有一定的参考价值, 有需要的朋友可以 ...
- [css] 设置字体时为什么建议设置替换字体?
[css] 设置字体时为什么建议设置替换字体? 这是由于网站用户的浏览设备不同,可能并不支持或没有安装你所设置的字体. 这时候就会自动使用替换字体来对网页进行一个展示. 设置替换字体可以尽可能保证所有 ...
- word中字体大小(pt)与网页中css设置font-size时用的px大小对应关系
word中字体大小(pt)与网页中css设置font-size时用的px大小对应关系 pt与px转换关系为 1px= 0.75pt. 所以word中五号字体(10.5pt)在网页中对应的font-si ...
- 鼠标移动到div上,div中的img放大
<!DOCTYPE html> <html><head> <meta charset="UTF-8" /> <title> ...
- 什么是 HTML div标签以及如何使用 CSS 设置样式
HTML 分割标记,简称为"div",是一种特殊元素,可让您在网页上将相似的内容集组合在一起.您可以将其用作关联相似内容的通用容器. 标签是最常用的div标签之一,尽管引入了语义元 ...
- 八、pink老师的学习笔记—— CSS用户界面样式(鼠标样式、轮廓线、防止拖拽文本域)
2. CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式,以便提高更好的用户体验. 更改用户的鼠标样式 (滚动条因为兼容性非常差,我们不研究) 表单轮廓等. 防止表单域拖拽 2.1 鼠标样 ...
- CSS设置样式的三种方式
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 1.CSS 1.1内联样式 1.2内部样式表 1.3外部样式表 前言 对css的学习进行总结 提示:以下是本篇文章正文 ...
最新文章
- oracle随机取数据
- iOS开发中视图相关的小笔记:push、modal、popover、replace、custom
- KMP算法求解next数组值(模式串从下标0开始或从下标1开始)以及求值后与主串的匹配过程
- IPC\DVS\DVR与NVR之间的区别
- Pytorch:GAN生成对抗网络实现二次元人脸的生成
- CodeForces - 484E Sign on Fence(主席树区间合并+二分)
- 拖欠水费可能影响个人征信,大家怎么看?
- 闪存必须解决的三大问题
- 使用Spring Boot Operator部署SpringBoot到K8S
- 微型计算机系统的五大组成部分,计算机系统的组成计算机硬件的五大部分是什么...
- 2021年暑期训练阶段三Day3
- 爬虫-3-requests和代理
- windows防火墙开启端口
- 一个公务员工作七年后的肺腑之言
- # Codeforces Round #548 (Div. 2)C Edgy Trees
- 小猫钓鱼的判断 C语言实现(未优化)
- oracle IMP-00085: 为无界导出文件指定了多个输入文件
- win10 VS 2015安装包丢失或损坏
- js动态添加样式和jQuery动态添加样式
- 公司要做一个新网站,赶上编程语言在摆地摊