hover 插入html元素,解决hover生成border造成的元素移动方法

前言

我们有时候会遇到 hover 伪类给元素添加边框的时候，元素中的内容发生位移，虽然我们设置了 box-sizing: border-box 并且规定了元素的宽高，但是内容依然被边框挤开了。如下面这种情况：

.test {

height: 30vmin;

width: 30vmin;

background: lightblue;

box-sizing: border-box;

}

.test:hover {

border: 5px solid black;

}

this is a div.

这里的原因很明显，我们的元素大小并没有变(如果没有设置元素宽高或者 box-sizing: border-box 则元素大小会改变)， box-sizing: border-box 是生效的，但是元素中的内容因为突然添加的边框而被挤开了，我们的盒模型从外到内依次是 margin ， border ， padding ， content ，所以新加入的 border 必然将 content 压缩的更小，并且 content 的边界坐标也变了，因为导致视觉上的内容移动。所以解决问题的办法就是让边框的添加不影响 content 的位置。

为元素添加边框

贸然出现的边框改变了原有的布局，让内容移动了，既然如此，我们可以在之前的布局中就让边框存在就可以了。

.test {

height: 30vmin;

width: 30vmin;

background: lightblue;

border: 5px solid transparent;

box-sizing: border-box;

}

.test:hover {

border: 5px solid black;

}

使用 box-shadow

使用不占用盒模型空间的 box-shadow 或者 outline 也是一种选择，

.test:hover {

/* border: 5px solid black; */

box-shadow: 0 0 0 5px black;

outline: 5px solid black;

}

用 padding

我们可以通过改变 padding 大小来给 border 预留空间。

.test {

height: 30vmin;

width: 30vmin;

background: lightblue;

box-sizing: border-box;

padding: 5px;

}

.test:hover {

padding: 0;

border: 5px solid black;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

hover 插入html元素,解决hover生成border造成的元素移动方法相关推荐

v-for 循环生成多个表单元素给动态生成的表单元素绑定值并且添加校验规则
需求:点击新增按钮能不断生成下级部门,所以我再data中定义了一个变量空数组 subordinateDepartmentNum:[] 默认值设置为[] 给增加按钮添加点击事件每点击一次按钮 s ...
解决rspec 生成报告时报utf-8错误的方法
找到gems\1.9.1\gems\rspec-core-2.14.3\lib\rspec\core\formatters\snippet_extractor.rb文件中的第27行: 在这边记录一下, ...
产生随机字符java_java生成随机字符串的两种方法
本文实例为大家分享了java生成随机字符串的具体代码,供大家参考,具体内容如下 import java.util.Random; public class CharacterUtils { //方法1 ...
微信小程序中好看的按钮样式（渐变色）、view的点击变色效果、按钮漂亮的圆角边框、解决hover设置失效
好看1: .wxss /* 从上往下渐变 */ .bt_1{margin-top: 40rpx;background: linear-gradient(#ccfbff, #ef96c5); } 好看2 ...
Vue 之解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
一.简介官方文档: 通过上面官方文档的介绍我们可以得知两个重点: ① 通过v-html生成的页面元素,不会被当做Vue模板进行编译,只会作为普通的html代码被插入,也就是说通过v-html插入的h ...
动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table
简介: el-table单元格合并,处理hover错乱问题,自定义底部合计栏. 如图所示: 源码(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html ...
关于hibernate的关联外键生成以及外键属性列的正确插入即：解决外键插入时，在关联表中除了外键列为空，其它属性均正常级联保存
关于hibernate的关联外键生成以及外键属性列的正确插入即:解决外键插入时,在关联表中除了外键列为空,其它属性均正常级联保存其实解决办法十分简单: 首先确保你能够级联保存数据,当然除了关联表的外 ...
html标签a+hover事件,触发a标签hover事件，如何在元素底部显示蓝色底块_html/css_WEB-ITnose...
回复讨论(解决方案) 你可以用li:hover border-bottom:3px solid blue; background-position:bottom; //是针对背景图片的位置,不是背景颜 ...
css after支持ie8,CSS使用伪元素:before,:after生成内容及IE兼容问题
1. CSS伪元素(pseudo-element)和伪类(pseudo-class) CSS2.1中的伪类有: :link :visited :hover :focus :acvtive :fir ...
gamit怎么利用glred生成测站时间序列_香侬读 | 按什么套路生成？基于插入和删除的序列生成方法
"香侬读"是香侬科技(Shannon.AI)推出的栏目,每周解读NLP或前沿.或经典的论文,捕捉时下最新见解,探究未来发展趋向.欢迎大家广泛讨论.交流,也欢迎推荐优秀的文章与我们一 ...

hover 插入html元素,解决hover生成border造成的元素移动方法

hover 插入html元素,解决hover生成border造成的元素移动方法相关推荐

最新文章

热门文章