相信很多人都遇到过 Retina屏的1px边框  的问题.

很多人都用 :before,:after 伪类

eg:

.div:after {
position: absolute;
top: 0;
 left: 0;
width: 200%;
 height: 200%;
 content: '';
 border: 1px solid #e2e2e2;
 border-radius: 3px;
-webkit-transform: scale(.5);
 -webkit-transform-origin: 0 0;
}

的方式来实现,but用:before,:after 伪类会产生一个bug,即当前元素的 鼠标事件 无效。

这个bug 可以在:before,:after 伪类css 中加上css3的 pointer-events:none 属性,

pointer-events:none顾名思意,就是没有鼠标事件的意思。

pointer-events:none 的应用的更多相关文章

  1. 浏览器 Pointer Events

    前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...

  2. javascript code snippet -- Forwarding Mouse Events Through Layers

    Anyone who has worked with web apps has likely created a masking element at some point, and the grea ...

  3. ExtJS笔记 Using Events

    Using Events The Components and Classes of Ext JS fire a broad range of events at various points in ...

  4. touch pointer

    在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...

  5. 浏览器的统一指针事件:Pointer Event

    在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...

  6. jquery触屏幻灯片

    一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...

  7. javascript 手势缩放 旋转 拖动支持:hammer.js

    原文: https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/visual.html /*! Hammer.JS - v2.0.4 ...

  8. Xenko基础API笔记3- Pointers指针设备屏幕上点对应的手指触摸。

    样本这里是一个简单的示例程序,跟踪目前在屏幕上的指针和打印他们的位置.访问输入字段,类继承自@ SiliconStudio.Xenko.脚本的类. public override async Task ...

  9. 【转】谈谈Google Polymer以及Web UI框架的未来

    原文转自:http://www.csdn.net/article/2013-05-27/2815450-google-polymer 摘要:开发者Axel Rauschmayer在自己的博客上详解了G ...

  10. 单击HighCharts柱形体弹框显示详细信息

    上篇博客介绍了如何在HighCharts统计图表下生成表格,二者相互结合,可以对数据进行更好的统计分析.在统计的同时,如果需要想要及时查看详细信息的话,就得再加一个功能,就是单击柱形体,显示该项下的详 ...

随机推荐

  1. Mac搭建Fluter应用环境

    1.创建一个路径.例如我创建是: /Users/chenghui/ 然后创建一个文件夹: development 把下载好的Fluter 解压到当前目录下: development /Users/ch ...

  2. linux安装syncthing

    https://blog.csdn.net/weixin_30527551/article/details/98882344 https://syncthing.net/downloads/ http ...

  3. docker 容器命令

    语法docker run [OPTIONS] IMAGE [COMMAND] [ARG...] OPTIONS说明: -a stdin: 指定标准输入输出内容类型,可选 STDIN/STDOUT/ST ...

  4. c printf(“%d”,变量)函数

  5. Java8新特性之方法引用

    <Java 8 实战>学习笔记系列 定义 方法引用让你可以重复使用现有的方法定义,并像Lambda一样传递它,可以把方法引用看作针对仅仅涉及单一方法的Lambda的语法糖,使用它将减少自己 ...

  6. 在PHPstorm中使用数组短语法[],出现红色波浪

    在PHPstorm中使用数组短语法[],出现红色波浪 1. 在tp3.2.3项目中使用数组短语法[],报错如下错误: Short array syntax is allowed in PHP 5.4 ...

  7. SqlServer2016 startengine错误的解决方式整理

    因为某些需要,最近在安装SqlServer2016,但总是安装失败,按照网上各路大佬的解决方案都没有成功.报错提示为两个:无法获取数据库引擎句柄,无法恢复数据库引擎服务.按照网上做法,使用admini ...

  8. 怎么更改maven工程jdk版本(默为1.5,怎么更改jdk版本为1.8)

    使用maven 创建工程更改默认jdk版本(1.5)方法 step1: 找到自己项目的pom.xml文件,添加下图黄色区域代码(文末附上的有代码:可以直接复制) step2: 保存一下更改后的的pom ...

  9. [javascript]js原型链以及原型链继承

    基础的三个要素: 函数 ,函数实例,实例原型. 实例原型相当于 父类, 函数相当于构造函数 举例: class Fn extends Fn.prototype{ } 实例: let f = new F ...

  10. 如何查看class文件的jdk版本

    版权声明:本文为博主原创文章,转载请注明本文链接.文章内容如有错误望能指正,以免误导更多人. https://blog.csdn.net/gnail_oug/article/details/47145 ...