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 ...
随机推荐
- java nio 缓冲区读写数据(图形详解)
Position 您可以回想一下,缓冲区实际上就是美化了的数组.在从通道读取时,您将所读取的数据放到底层的数组中. position 变量跟踪已经写了多少数据.更准确地说,它指定了下一个字节将放到数组 ...
- Spark源码(1): SparkConf
1. 简介 SparkConf类负责管理Spark的所有配置项.在我们使用Spark的过程中,经常需要灵活配置各种参数,来使程序更好.更快地运行,因此也必然要与SparkConf类频繁打交道.了解它的 ...
- Java工程师学习指南第6部分:深入理解JVM虚拟机
本文整理了微信公众号[Java技术江湖]发表和转载过的JVM虚拟机相关优质文章,想看到更多Java技术文章,就赶紧关注本公众号吧吧. JVM原理分析,看了都说好 JVM 深入学习:Java 解析 Cl ...
- 什么是UEFI
UEFI是什么?也许我们大多数用户对这个概念很模糊.uefi可以做什么,有什么具体的应用?虽然不知道具体是做什么的,但是我们经常会在BIOS设置中发现UEFI的踪迹.因为现在越来越多的电脑已经使用了U ...
- windows7-jdk配置
这里主要讲这么配置环境变量 1.下载jdk安装程序,一直下一步就行了,安装完成 2.添加环境变量 JAVA_HOME 如:C:\Program Files\Java\jdk1.7.0_80 CLASS ...
- Git速成学习第四课:解决冲突
Git速成学习笔记整理于廖雪峰老师的官网网站:https://www.liaoxuefeng.com/ 我们继续练习,准备新的feature1分支. $ git checkout -b feature ...
- ue-cli3 取消eslint校验代码
参考链接:https://www.cnblogs.com/sjie/p/9884362.html
- 能力不足的C++开发会欺辱能力不足C#开发
能力不足的C++开发会欺辱能力不足C#开发 我被C++开发欺辱的岁月 前言 人被压迫了,为什么不斗争?——鲁迅 作为一个C#开发者,我经历了,也见证了很多同行饱受C++开发的歧视和欺辱. 而且,这 ...
- python一些小知识点is和编码
dic = { "name":["alex", "wusir", "taibai"], 'py9':{ "ti ...
- php遇到Allowed memory size of 134217728 bytes exhausted问题解决方法
终端报出了Allowed memory size of 134217728 bytes exhausted错误,而且重启电脑再次执行仍然是一样.上网查了查,是因为php默认内存限制是128M,所以需要 ...