首页 > 其他分享 >CSS pointer-events 属性

CSS pointer-events 属性

时间:2022-12-14 18:33:37浏览次数:54  
标签:none SVG 适用 pointer events CSS 属性

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";

 

标签:none,SVG,适用,pointer,events,CSS,属性
From: https://www.cnblogs.com/numver/p/16982935.html

相关文章

  • CSS变量
    /*全局变量保存的地方*/:root{--main-bg-color:red;/*变量名必须以--开头*/}var(custom-property-name,value)值描述custom-property-name必需。自定......
  • CSS伪类三角形
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="widt......
  • Nodejs学习 2 -- events事件处理EventEmitter
    EventEmitter类模块:events源码:events.jsEventEmitter类,是node中事件的基础,实现了事件模型需要的接口,包括addListener,removeListener,emit及其ta工具方法.同原生ja......
  • CSS-3D动画 webpack-logo
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content=......
  • 计组学习02——C and Pointers
    计组学习——CandPointers由于已经比较熟悉C了,上课时跳过了许多已经熟知的部分,只记录自己不太熟的地方。UnionsinC定义和struct基本一样unionfoo{inti......
  • CSS
    第一个CSS程序index.html<head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="css/style.css"></head><body><h1>ti......
  • [踩坑回顾]使用JS改变元素位置,操作css比较困难时,可更换元素的类名
    本人大菜鸟一枚,以此作为记录。使用到技术栈jQuery。开发中遇到某个元素需要在页面上切换left:0px为right:0px的需求,直接操作css会导致同时存在left和right属性,删除......
  • 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
    预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说......
  • 前端入门教程:CSS标准盒模型和怪异盒模型区别
    理解盒模型:CSS3中的盒模型有以下两种:标准盒模型、IE盒子模型(怪异盒模型),盒模型是由4个部分组成,由内向外分别是content(下图蓝色部分)、padding、border、margin盒模型有5......
  • HTML--CSS
     字体图标 字体图标展示的是图标,本质是字体。处理简单的、颜色单一的图​字体图标的优点:灵活性:灵活地修改样式,例如:尺寸、颜色等 轻量级:体积小、渲......