pointer-events 属性用于设置元素是否对鼠标事件做出反应。

CSS 语法

pointer-events: auto|none;

属性值

属性值 描述
auto 默认值,设置该属性链接可以正常点击访问。
none 元素不能对鼠标事件做出反应
initial 设置该属性为它的默认值,查看更多initial
inherit 从父元素继承该属性, 查看更多 inherit
/* 属性值 */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* 只适用于 SVG */
pointer-events: visibleFill; /* 只适用于 SVG */
pointer-events: visibleStroke; /* 只适用于 SVG */
pointer-events: visible; /* 只适用于 SVG */
pointer-events: painted; /* 只适用于 SVG */
pointer-events: fill; /* 只适用于 SVG */
pointer-events: stroke; /* 只适用于 SVG */
pointer-events: all; /* 只适用于 SVG */ /* 全局值 */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

JS代码改变例子:

document.getElementById("div1").style.pointerEvents = "none";

CSS pointer-events 属性的更多相关文章

  1. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  2. 浏览器 Pointer Events

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

  3. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...

  4. css 的pointer-events 属性

    1.css 有好多属性,可以让你感觉到不可思议,关键是可以解决一些难以实现的问题,今天遇到一个,就是 point-enevts属性 支持 pointer-events 属性 的浏览器版本 2. 1  ...

  5. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  6. css标签及属性

    css标签及属性 HTML引入CSS的方法 1.嵌入式  <style type = “text/css”>要写的样式</style> 2.外联式  <link rel ...

  7. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  8. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  9. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  10. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

随机推荐

  1. pytorch学习笔记(4)--dataloader

    batch_size:有多少张 shuffle=True:顺序不打乱 num_workers: 进程数 drop_last:最后不够64张是否舍去 import torchvision from to ...

  2. Linux基础第十章:系统安全及应用

    目录 一.账户安全措施 1.账户管理 2.锁定配置文件 3.清除历史记录 二.sudo 1.sudo概念及优点 2.使用sudo 3.sudo实操演示 4.设置sudo别名 5.sudo特别注意 一. ...

  3. kafka常用命令(zookeeper与bootstrap-server)

    在 0.9.0.0 之后的 Kafka,出现了几个新变动,一个是在 Server 端增加了 GroupCoordinator 这个角色,另一个较大的变动是将 topic 的 offset 信息由之前存 ...

  4. mongodb删除指定字段

    db.getCollection('geoServer').update({},{$unset:{longitude:null,latitude:null}},{ multi: true}) 实测有效 ...

  5. el-dropdown-item 添加点击 事件无效 (vue)

    如图 无效!!! 为什么呢?? 想了一下,可能是因为 el-dropdown-item   没有自定义click事件 so! 解决办法就是  添加原生事件  :  @click.native   还有 ...

  6. SQL-关联

    关联的本质:从一张表依次取一条数据和另一张表每一条数据进行匹配 内关联 inner join (inner可省略) -- 只显示关联的上的数据外关联有三种左外 left join -- 主表数据不丢失 ...

  7. python机器学习——KNN(K近邻算法)

    背景与原理: KNN算法其实是逻辑最简单的分类算法--我们认为一个数据的类型是由与其最接近的数据决定的,而"接近"实际上就是我们度量两个数据点之间的距离,如果我们把一组数据看做一个 ...

  8. 时间格式转换成指定格式(Vue)

    1 /** 2 * Parse the time to string 3 * @param {(Object|string|number)} time 4 * @param {string} cFor ...

  9. Quartus II 18.x Modelsim仿真设置

    Quartus II 18.x Modelsim仿真设置 本节内容介绍在如何在QuartusII 应用环境下设置modelsim仿真选项,并进行波形仿真.下面以四位乘法器为例介绍. 在QuartusI ...

  10. c#控制台使用WebBrowser获取html问题

    在主线程上打上 [STAThread]标记就行 在main()最后一句  添加Application.Run();  就能使控制台像窗体一样持久运行而不是阻塞啥也不干 [STAThread]stati ...