多行图片div设置hover属性显示边框出现div错位的解决办法

最新推荐文章于 2024-07-16 22:00:27 发布
最新推荐文章于 2024-07-16 22:00:27 发布
阅读量1.4k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40448816/article/details/85078863
版权

在写HTML时遇到多行图片设置div的hover属性显示边框。当鼠标移动到div时候会把下面的内容挤出去（如图）

可以看到下面的div被挤出去了

原因是因为  设置border时设置了1px边框，多出的这1px，与其它元素产生了挤压， 导致div偏移。

解决办法是先给div设置一个跟背景颜色相同的固定边框，比如我这个是白色背景，那么我就设置该div的border属性为白色

border: 1px solid #fff;

或者是给div设置一个透明的边框

border: 1px solid  transparent;

然后再设置div的hover属性的边框

list-item:hover{border: 1px solid #1d1d1d;}

这样就不会挤掉了

 

 

AfanChang
关注
CSS 奇思妙想边框动画
m0_70273331的博客
04-30 2353
} 由于 border 和 background 在盒子模型上位置的差异，视觉上会有一个很明显的错位的感觉： 要想解决这个问题，我们可以把 border 替换成 outline，因为 outline 可以设置 outline-offset。便能完美解决这个问题： div { outline: 1px solid #333; outline-offset: -1px; &:hover { outline: none; } } 最后看看运用到实际按钮上的效果 《大厂前端面试题解析+Web核心总结学习笔
浏览器兼容性问题及解决方案大汇总
qq_51179053的博客
07-03 3233
所谓浏览器兼容性问题：是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的效果。解决方法前端开发疆场需要检查浏览器的兼容性，这里推荐（Can I Use）这个查询网址。是一个针对前端开发人员制定的一个查询CSS、JS、HTML5、SVG，可以很好的保证网页在浏览器中的兼容性。CSS兼容问题1、不同浏览器的标签默认的内外边框不同。解决方案 {margin:0;padding:0}/** * 该文件用于清除浏览器样式 */ html, body, div, span, applet, objec
使用hover为div添加边框时，页面布局发生错位的解决办法
u014033756的专栏
04-03 8902
当鼠标滑动到一个盒子上面时要为其添加边框，但是加上边框之后页面布局发生了错位，究其原因是因为加上border之后原来的盒子的宽高发生了变化，导致其他盒子被挤到一边，如图： ，其中一个解决办法就是在鼠标滑动到盒子之前，为其添加一个透明边框进行占位，例如:border:1px solid transparent; 结果如下：
div的hover显示隐藏
a297487901的博客
09-22 9292
<style> .contain{ width: 100%; } .box{ margin: 100px auto; width: 500px; height: 500px; border: 1px solid #000;
div hover 特效 css样式
weixin_30462049的博客
12-26 606
-webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -moz-box-shadow:3px 5px 7px rgba(0,0,0,.7); -webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7); box-shado...
使用hover给div加边框，出现div晃动和页面布局发生混乱的解决办法
weixin_44580880的博客
03-08 3357
** 使用hover给div加边框，出现div晃动和页面布局发生混乱的原因： 因为给div设置的border的宽度，使得div的宽度增加，撑开了其他的div 解决办法： (1)在给div设置hover前，给它设置一个边框占位，颜色设为透明， 如：div {border:1px solid transparent;},然后再给div设置hover,div:hover { border:1px sol...
对点击卡片，hover设置border，出现抖动和div走位问题，解决方法
Cu50moon的博客
02-19 786
2.padding，broder 对冲，设置和目标broder宽度一致的padding，之后当hover时重置。以上两种方法都没有办法解决，鼠标hover和选中元素的broder宽度不一的问题。1.透明broder，对元素本身设置与目标broder宽度一致的透明边框。将偏移设置为目标宽度一样即可。属性一致，radio也适用。表示元素的轮廓，语法与。支持的关键字和属性与。
CSS+DIV编写经验总结之CSS样式小模板
12-06
- **作用**：移除图片边框，防止链接图片出现默认边框，影响页面美观。 - **应用场景**：几乎适用于所有含有图片的页面。 5. **清除浮动**： ```css .clear{ clear:both; } ``` - **作用**：用于清除浮动...
CSS给图像加边框时不会产生位置偏移
weixin_42257506的博客
07-16 1242
CSS给图像加边框时不会产生位置偏移 在vue开发pad端的项目时，银行柜面授权需要授权页面截图，我们将授权页面截图通过base64的方式截取，获得到将其展示到html页面。通过v-html展示到页面。完成页面截取展示页面的时候，发现展示到页面的时候，图片发生偏移。 给图片，加上border，图片就会显示在该显示的区域内，不会发生偏移。 图片不加border的话，会产生位置偏移的问题...
DIV+CSS网页错位原因解决方法
weixin_33805557的博客
03-07 335
2019独角兽企业重金招聘Python工程师标准>>> ...
css 对div用hover设置border，出现抖动和div走位问题，解决方法
weixin_43492777的博客
12-14 2918
css 对div用hover设置border，出现抖动和div走位问题，解决方法 样式设置 ： div:hover { border:1px solid red;} 当鼠标移动到div时，产生抖动和偏移。 产生的原因： 是因为设置border时设置了1px边框，多出的这1px，与其它元素产生了挤压， 导致div偏移。 解决方法： 第一种方法：是先将这个div设置一个跟背景颜色一样的边框，比如背景颜色为#aaa；那么你先设置这个div的样式：div {border:1px solid #aaa;}，然后再设置
【前端】解决盒子被撑大问题 box-sizing
萌狼蓝天の技术栈
03-11 1362
设置 box-sizing:border-box(原本的默认值为:content-box) box-sizing: content-box;/*盒子宽度=CSS中设置的width+border+padding*/ box-sizing: border-box;/*盒子的宽度=css中设置的width*/ 实例对比 <!DOCTYPE html> <html lang="en"&...
Html+Css实现鼠标悬浮时，边框出现且不挤压内容
最新发布
ready_to_be的博客
07-16 321
即在box里面再套一个div标签class名为item，宽高设置得与父级box一样大，好像盖在它上面一样。然后再hover到box上时，使item上出现border。这样便不会去视觉上挤压box的内容，只是遮盖了一点点边。代码见上，这样做会在边框出现的同时，像内挤压内容，可能会影响视觉效果。
css transform:scale缩放后位置偏移问题解决
sunzhen15896的博客
09-01 1万+
css相关问题
使用el-card第一行没有对齐解决方法
weixin_51457042的博客
05-22 1183
当使用element plus的el-card组件时候，第一行和后面会没有对齐。原因是el-col添加了offset列偏移。
html中div hover的用法,CSS: hover选择器的使用详解
热门推荐
weixin_42517317的博客
06-10 2万+
有些时候需要用到mouseover和mouseout这两个鼠标事件，但是写js又比较麻烦，还要添加监听事件，所以能用css解决的东西尽量yongcss解决，这样可以提高性能，下面说一下我对:hover 的了解:之前在学计算机应用的时候，老师教我们使用了:hover选择器来完成下拉菜单，之前只知道怎么使用，并不知道为什么要这么用，现在记下怎么使用吧定义和用法定义：:hover 选择器用于选择鼠标指针...
HTML图片错位重叠,div + css 的一点点小经验. (错位，叠位，移位等现象)
weixin_31572321的博客
05-31 1861
我们在用div+css编写网站框架的时候，有时候会遇到左右两栏，或三栏以上的问题。往往是这样子的：左边这一栏是固定高度，而右边那一栏是要根据内容，自动伸长的。如果您给左右两栏都设置固定的高度在FF下是会叠位的，或是错位的。会发生错误。现在有两种方式可以解决，第一种是用display:table两解决。就是在最外的div加上display:table,就可以了.在这种情况下，当你所写的栏目是三栏，或...
CSS鼠标悬停div加边框效果
别在熬夜了！
09-23 1万+
css实现鼠标悬停时图片加边框效果 .demo{background:white;margin:0 5px;width:170px;height:170px;} .demo:hover{border:1px red solid;} .demo:hover{width:166px;height:166px;border:2px solid #D94600;}
前端解决图片溢出div的快速技巧
一个简单的方法是将图片的CSS宽度属性设置为100%，这样图片将始终填充其父元素div的宽度，而高度则会按比例缩放。这可以通过以下代码实现： ```css img { width: 100%; height: auto; } ``` 这样图片就会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值