样式设置 : 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颜色设置为透明

  1. div {border:1px solid transparent;},

然后再引入hover动作

  1. div:hover { border:1px solid red;}

css 对div用hover设置border,出现抖动和div走位问题,解决方法的更多相关文章

  1. OSS设置CORS规则以后还是报No 'Access-Control-Allow-Origin'解决方法

    OSS设置CORS规则以后还是报No 'Access-Control-Allow-Origin'解决方法 在OSS控制台设置了CORS规则以后,通过JS程序去调用的时候报No 'Access-Cont ...

  2. 子div块中设置margin-top时影响父div块位置的解决办法

    在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...

  3. 子DIV块中设置margin-top时影响父DIV块位置的解决办法?

    解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声 ...

  4. 子div块中设置margin-top时影响父div块位置的解决办法及其原因

    解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top. 有个叫 b ...

  5. jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法

    前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...

  6. div嵌套导致子区域margin-top失效不起作用的解决方法

    有两个嵌套关系的div,如果外层div的父元素padding值为0, 那么内层div的margin-top或者margin-bottom的值会"转移"给外层div,使父元素产生上外 ...

  7. 当Thread.Sleep的暂停时间参数设置过小时,精度很差的解决方法

    一.问题产生 在C#和C++中有这样一个函数:void Sleep(int Timeout),可以让线程暂停指定的毫秒数. 但是我在win8下调用这个函数实现按照固定频率发送udp数据包时,会有一个问 ...

  8. oracle安装报错[INS-30131]执行安装程序验证所需的初始设置失败(无法访问临时位置)解决方法!

    最近在电脑上安装oracle12c,安装时,在执行检查环境步骤时候报错: [INS-30131]执行安装程序验证所需的初始设置失败(无法访问临时位置) 最后在网上搜索解决方法,特记录下,以防以后再用到 ...

  9. 关于Windows2008服务器设置MIME后仍然无法播放MP4的解决方法

    最近遇到了一个非常邪门的故障,重新安装了Windows2008服务器后 Mp4无法正常播放: 整个互联网中关于设置MP4的方法基本都是教你如何在IIS中设置MIME 本文讨论的不是如何教你设置MIME ...

随机推荐

  1. java nio 缓冲区读写数据(图形详解)

    Position 您可以回想一下,缓冲区实际上就是美化了的数组.在从通道读取时,您将所读取的数据放到底层的数组中. position 变量跟踪已经写了多少数据.更准确地说,它指定了下一个字节将放到数组 ...

  2. Spark源码(1): SparkConf

    1. 简介 SparkConf类负责管理Spark的所有配置项.在我们使用Spark的过程中,经常需要灵活配置各种参数,来使程序更好.更快地运行,因此也必然要与SparkConf类频繁打交道.了解它的 ...

  3. Java工程师学习指南第6部分:深入理解JVM虚拟机

    本文整理了微信公众号[Java技术江湖]发表和转载过的JVM虚拟机相关优质文章,想看到更多Java技术文章,就赶紧关注本公众号吧吧. JVM原理分析,看了都说好 JVM 深入学习:Java 解析 Cl ...

  4. 什么是UEFI

    UEFI是什么?也许我们大多数用户对这个概念很模糊.uefi可以做什么,有什么具体的应用?虽然不知道具体是做什么的,但是我们经常会在BIOS设置中发现UEFI的踪迹.因为现在越来越多的电脑已经使用了U ...

  5. windows7-jdk配置

    这里主要讲这么配置环境变量 1.下载jdk安装程序,一直下一步就行了,安装完成 2.添加环境变量 JAVA_HOME 如:C:\Program Files\Java\jdk1.7.0_80 CLASS ...

  6. Git速成学习第四课:解决冲突

    Git速成学习笔记整理于廖雪峰老师的官网网站:https://www.liaoxuefeng.com/ 我们继续练习,准备新的feature1分支. $ git checkout -b feature ...

  7. ue-cli3 取消eslint校验代码

    参考链接:https://www.cnblogs.com/sjie/p/9884362.html

  8. 能力不足的C++开发会欺辱能力不足C#开发

    能力不足的C++开发会欺辱能力不足C#开发 我被C++开发欺辱的岁月   前言 人被压迫了,为什么不斗争?——鲁迅 作为一个C#开发者,我经历了,也见证了很多同行饱受C++开发的歧视和欺辱. 而且,这 ...

  9. python一些小知识点is和编码

    dic = { "name":["alex", "wusir", "taibai"], 'py9':{ "ti ...

  10. php遇到Allowed memory size of 134217728 bytes exhausted问题解决方法

    终端报出了Allowed memory size of 134217728 bytes exhausted错误,而且重启电脑再次执行仍然是一样.上网查了查,是因为php默认内存限制是128M,所以需要 ...