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. laravel 导出

    常规导出xlsx  更多的是导出小数据  需要大数据导出的时候 需要临时更改内存大小  ini_set('memory_limit', '1024M');  不更改内存的情况 可以选择队列导出到服务器 ...

  2. Python使用requests和requests_toolbelt上传文件

    1.requests-toolbelt官方文档:https://pypi.org/project/requests-toolbelt/ 2.环境安装 pip install requests-tool ...

  3. React整洁的代码的一些原则

    1. Model is everything models are  the heart of your app. If you have models separated from th rest ...

  4. 全局 使用 stylus 变量

    首先 安装 啦 npm i stylus stylus-loader -D 之后 使用全局变量 然后在组件中引用改变量  -->没有用! 原因还没有在build/utils.js文件 全局引入 ...

  5. 作业一:PCA降维练习

    作业一:PCA降维作业 代码 点击查看代码 #author:qiao_px #@Time 2022/10/31 16:11 #@File ceshiPCA.py import pandas as pd ...

  6. kafka例子

    <dependencies> <dependency> <groupId>org.apache.kafka</groupId> <artifact ...

  7. 【flask】建站经验随笔

    [前端] 1.前端table标签中每行使用template中 {%for i in rows%} {% endfor %}来生成之后,如果想对每行进行一个button处理,此时如果使用jquery的$ ...

  8. Python 时间日期获取(今天,昨天或者某一段时间)

    日常使用的时间函数: 昨天,或者N天的日期 import time def time_stamp(days): hours = int(days) t = time.strftime("%Y ...

  9. 2月26日Android开发学习

    1.App运行日志 Android采用Log工具打印日志,他讲各类日志划分为五个等级 (1)Log.e:表示错误信息,比如可能导致程序崩溃的异常. (2)Log.w:表示警告信息. (3)Log.i: ...

  10. Navicat15激活

    1.下载Navicat for MySQL 15 https://www.navicat.com.cn/download/navicat-for-mysql 2.下载激活工具 注意:因某些限制,下载链 ...