css 对div用hover设置border,出现抖动和div走位问题,解决方法
样式设置 : div:hover { border:1px solid red;} 当鼠标移动到div时,产生抖动和偏移。
产生的原因: 是因为设置border时设置了1px边框,多出的这1px,与其它元素产生了挤压, 导致div偏移。
解决方法:
第一种方法:是先将这个div设置一个跟背景颜色一样的边框,比如背景颜色为#aaa;那么你先设置这个div的样式:div {border:1px solid #aaa;},然后再设置hover动作,div:hover { border:1px solid red;}。
第二种方法:将这个div的border颜色设置为透明
div {border:1px solid transparent;},
然后再引入hover动作
div:hover { border:1px solid red;} 。
css 对div用hover设置border,出现抖动和div走位问题,解决方法的更多相关文章
- OSS设置CORS规则以后还是报No 'Access-Control-Allow-Origin'解决方法
OSS设置CORS规则以后还是报No 'Access-Control-Allow-Origin'解决方法 在OSS控制台设置了CORS规则以后,通过JS程序去调用的时候报No 'Access-Cont ...
- 子div块中设置margin-top时影响父div块位置的解决办法
在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...
- 子DIV块中设置margin-top时影响父DIV块位置的解决办法?
解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声 ...
- 子div块中设置margin-top时影响父div块位置的解决办法及其原因
解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top. 有个叫 b ...
- jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法
前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...
- div嵌套导致子区域margin-top失效不起作用的解决方法
有两个嵌套关系的div,如果外层div的父元素padding值为0, 那么内层div的margin-top或者margin-bottom的值会"转移"给外层div,使父元素产生上外 ...
- 当Thread.Sleep的暂停时间参数设置过小时,精度很差的解决方法
一.问题产生 在C#和C++中有这样一个函数:void Sleep(int Timeout),可以让线程暂停指定的毫秒数. 但是我在win8下调用这个函数实现按照固定频率发送udp数据包时,会有一个问 ...
- oracle安装报错[INS-30131]执行安装程序验证所需的初始设置失败(无法访问临时位置)解决方法!
最近在电脑上安装oracle12c,安装时,在执行检查环境步骤时候报错: [INS-30131]执行安装程序验证所需的初始设置失败(无法访问临时位置) 最后在网上搜索解决方法,特记录下,以防以后再用到 ...
- 关于Windows2008服务器设置MIME后仍然无法播放MP4的解决方法
最近遇到了一个非常邪门的故障,重新安装了Windows2008服务器后 Mp4无法正常播放: 整个互联网中关于设置MP4的方法基本都是教你如何在IIS中设置MIME 本文讨论的不是如何教你设置MIME ...
随机推荐
- API网关的用处
API网关我的分析中会用到以下三种场景. Open API. 企业需要将自身数据.能力等作为开发平台向外开放,通常会以rest的方式向外提供,最好的例子就是淘宝开放平台.腾讯公司的QQ开发平台.微信开 ...
- Tornado实现监控数据实时展示
前言: It has been a while since I last updated my blogs. 使用Tornado开发一个实时监控信息系统,其中包括 CUP.内存.网卡.磁盘使用率. 涉 ...
- [Scikit-learn] Yield miniBatch for online learning.
From: Out-of-core classification of text documents Code: """ ======================= ...
- save()和savaorupdate的区别
hibernate的保存 hibernate对于对象的保存提供了太多的方法,他们之间有很多不同,在这里细说一下,以便区别: 一.预备知识: 在所有之前,说明一下,对于hibernate,它的对 ...
- 数据质量、特征分析及一些MATLAB函数
MATLAB数据分析工具箱 MATLAB工具箱主要含有的类别有: 数学类.统计与优化类.信号处理与通信类.控制系统设计与分析类.图像处理类.测试与测量类.计算金融类.计算生物类.并行计算类.数据库访问 ...
- @vue/cli3中解决Elint中console.log报错的问题
方法一:package.json中”eslintConfig”>"rules”字段添加如下代码 "no-console": "off", &qu ...
- Python3 Selenium自动化web测试 ==> 第十一节 WebDriver高级应用 -- 显示等待 + 二次封装
学习目的: 掌握显示等待 掌握二次封装 正式步骤: step1:显示等待的代码示例 # -*- coding:utf-8 -*- from selenium import webdriver from ...
- Sed---linux系统三剑客(二)
grep .sed.awk被称为linux中的"三剑客". grep 更适合单纯的查找或匹配文本 sed 更适合编辑匹配到的文本 awk 更适合格式化文本,对文本进行较复杂格式 ...
- 《精通并发与Netty》学习笔记(09 - Java中流的概念)
Java中流的概念 java程序通过流来完成输入/输出.流是生产或消费信息的抽象.流通过java的输入/输出与物理设备链接.尽管与它们链接的物理设备不尽相同,所有流的行为具有同样的方式.这样,相同的输 ...
- 攻防世界CRYPTO新手练习
0x01 base64 直接base64 Decode 得到flag cyberpeace{Welcome_to_new_World!} 0x02 Caesar key为12 的恺撒密码,解密德fla ...