使用hover为div添加边框时，页面布局发生错位的解决办法

最新推荐文章于 2024-05-15 23:18:27 发布
最新推荐文章于 2024-05-15 23:18:27 发布
阅读量8.8k 收藏 2
点赞数 6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014033756/article/details/51049574
版权

当鼠标滑动到一个盒子上面时要为其添加边框，但是加上边框之后页面布局发生了错位，究其原因是因为加上border之后原来的盒子的宽高发生了变化，导致其他盒子被挤到一边，如图：

，其中一个解决办法就是在鼠标滑动到盒子之前，为其添加一个透明边框进行占位，例如:border:1px solid transparent;

结果如下：

guonei001
关注
  • 6
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿京东左侧菜单 hover效果-简易demo
weixin_30808575的博客
11-04 2378
简单描述： 用到的知识点 css 中的绝对定位 以及 Js 中的事件冒泡（或事件委托） 1 .cont{display:inline-block;width:200px;height:200px;border:1px solid red;position:absolute;left:150px;top:2px;display:none;} 1 <div style="b...
使IE6支持:hover效果使用li:hover或div:hover
12-13
在IE6中只兼容a:hover，要使用li:hover或div：hover，需引用一个文件使其兼容： csshover.htc(点击直接查看) 放在网站的根目录下，并在css文件(或者<style>标签)中，加上 复制代码代码如下: body { behavior:...
hover改变元素高度后，撑开其他元素
qq_43654065的博客
03-23 1189
当为元素设置hover，从而改变元素的高度，但当元素高度变高时，会撑开底下的元素。 解决方法 可以在hover元素的外层div设置一个高度，对高度进行固定，则当hover元素变高时，并不会撑开外面盒子的高度。 ...
鼠标悬浮（hover）时显示提示框的效果
最新发布
Dalao_zzl的博客
05-15 1061
在Vue中，你可以使用多种方法来实现鼠标悬浮（hover）时显示提示框的效果。以下是一个简单的示例，它使用了Vue的指令（directive）和条件渲染（conditional rendering）来实现这个功能。指令来控制提示框的渲染。首先，我们需要在Vue组件中定义一个数据属性来控制提示框的显示与隐藏，以及一个方法来处理鼠标进入和离开事件。另外，如果你想要一个更复杂的提示框（比如支持HTML内容、延迟显示/隐藏等），你可能需要使用一个专门的库，如。（一个Vue的提示框插件）或其他类似的库。
当元素宽度增加时，如何实现“向右增加”，“向左增加”，“从中间向两侧增加”
阿牛哥的博客
10-31 232
当元素宽度增加时，如何实现“向右增加”，“向左增加”，“从中间向两侧增加”。
css:hover给元素添加悬停出现边框时布局发生变化解决办法
"BLOG"
02-14 3299
1.加边框的同时添加一个负值的margin，大小和边框大小相同。 .nav a:hover { color: #444; background-color: #fff; border-left: 2px solid #eee; margin-left: -2px; } 2.在加边框之前，给元素添加一个大小和边框相同，颜色透明的边框。 .nav a { display: blo...
CSS鼠标hover给元素加边框后发生移动
Martin 的博客
03-27 5259
CSS鼠标划过给元素加边框后发生晃动解决方法：默认给所有元素加上边框鼠标hover时改变div的width和height只需减去边框大小使用box-sizing属性改变div盒子模型的规则 =》 具体自搜...
多行排列图片时hover上去加边框挤图片的解决方法兼容IE7+
09-25
在网页设计中，我们经常会遇到一个问题，那就是当多个图片以多行多列的方式排列时，如果在鼠标悬停（hover）时为图片添加边框，会导致下方的图片位置发生偏移，这种现象被称为“边框挤压”问题。尤其是在兼容较老...
百度新闻页面布局html+css
02-28
在创建百度新闻页面布局时，我们需要结合两者，确保信息的呈现既美观又有序。 1. **HTML标签的使用**：在网页设计中，HTML标签是用来定义元素类型的，它们告诉浏览器如何解析和展示内容。例如，`<head>`标签包含元...
多行图片hover加边框会把下面的图片挤到别处的解决方法
09-25
遇到多行多列排列的图片时，hover上去加边框会把下面的图片挤到别处，解决方法就是对图片设置border:none，下面有个示例，遇到问题的朋友可以看看
通过 hover 来改变 border 颜色大小的时候，标签位置发生移动的问题
Young_Gao的博客
11-09 3152
为了实现鼠标上移到标签时来改变 border 的width 以及 color 实际操作的时候发现 标签 的位置会发生晃动 主要原因是 border 的宽度增加 导致了标签位置的变动 解决方法为： 在 css 中添加一个   box-sizing: border-box; 这样在改变 border 的时候，标签位置不会移动， 只是标签内部的内容的大小会空出来一个 border 的宽度
hover时border效果原理
weixin_30731305的博客
11-21 458
1. 从中间往两边散发：父元素设置相对定位；子元素设置绝对定位；设置子元素高度（有值）和设置宽度（0）来确定上下border。置子元素高度（0）和设置宽度（有值）来确定左右border。 <li> <i class="before"></i> <i class="after"></i> <...
css 小技巧
u013108007的博客
09-23 197
1.css hover 显示边框导致整个盒子的尺寸变化 可以使用 outline: 1px solid #ff0036; 2. 文本溢出处理、 //单行 .single { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } //多行 .more { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis;
：hover 加边框导致盒子抖动的解决办法
liuyuqing0414的博客
04-15 1979
【现遇到问题如下】 本身盒子无边框，启用：hover之后加上1px的边框，这时候对外显示的效果是盒子整体出现抖动。 【原因】 box-sizing: border-box; css3盒子模型的特性决定了：盒子宽高已定的情况下，后续加上边框和padding并不会改变盒子最初的大小。 因此，盒子大小不变，新加上的边框只会挤压盒子内部内容物的空间，从而再度调整内容排列。 【解决办法】 在一开始的时候就给盒子加上边框，边框颜色设置为透明，这样一来，鼠标经过前后盒子内容的空间都是一致的。 .sk_co
使用hover给div加边框，出现div晃动和页面布局发生混乱的解决办法
weixin_44580880的博客
03-08 3260
** 使用hover给div加边框，出现div晃动和页面布局发生混乱的原因： 因为给div设置的border的宽度，使得div的宽度增加，撑开了其他的div 解决办法： (1)在给div设置hover前，给它设置一个边框占位，颜色设为透明， 如：div {border:1px solid transparent;},然后再给div设置hover,div:hover { border:1px sol...
多行图片div设置hover属性显示边框出现div错位的解决办法
qq_40448816的博客
12-18 1382
在写HTML时遇到多行图片设置div的hover属性显示边框。当鼠标移动到div时候会把下面的内容挤出去（如图） 可以看到下面的div被挤出去了 原因是因为 设置border时设置了1px边框，多出的这1px，与其它元素产生了挤压， 导致div偏移。 解决办法是先给div设置一个跟背景颜色相同的固定边框，比如我这个是白色背景，那么我就设置该div的border属性为白色 borde...
设置border后div发生变化的问题
u013769818的专栏
01-13 2614
垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下  (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。 　　这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重
css 对div用hover设置border，出现抖动和div走位问题，解决方法
热门推荐
qq_38932936的博客
08-02 1万+
样式设置 ： div:hover { border:1px solid red;} 当鼠标移动到div时，产生抖动和偏移。 产生的原因： 是因为设置border时设置了1px边框，多出的这1px，与其它元素产生了挤压， 导致div偏移。 解决方法： 第一种方法：是先将这个div设置一个跟背景颜色一样的边框，比如背景颜色为#aaa；那么你先设置这个d...
为标签边框添加鼠标hover效果
05-25
你可以使用CSS中的:hover伪类选择器来为标签边框添加鼠标hover效果。具体方法如下： 1. 为标签设置边框样式，例如： ```css .tag { border: 1px solid gray; padding: 0.5rem; } ``` 2. 使用:hover伪类选择器为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值