div点击穿透,CSS属性pointer-events :none;实现护眼模式, 夜间模式遮罩
.div-xx{
pointer-events :none;/*取消事件,点击穿透*/
}
pointer-events , css属性值
auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
pointer-events
更像是JavaScript,它能够:
阻止用户的点击动作产生任何效果
阻止缺省鼠标指针的显示
阻止CSS里的
hover
和active
状态的变化触发事件阻止JavaScript点击动作触发的事件
实际代码使用中案例:style=
"pointer-events:none"
1、提交页面,提交按钮点击后,添加这个样式属性(style="pointer-events:none"),来防止重复提交。
2、一些层的绝对定位,覆盖按钮,穿透可以点击它。等等。
来看下具体用法:
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
pointer-events属性有很多值,但是对于浏览器来说,只有auto和none两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。
pointer-events属性值详解
auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
其它属性值为SVG专用,这里不再多介绍了。
应用
创建一个可点击穿透的遮罩,调暖色,实现护眼模式
js书签工具,夜间模式,护眼模式, 传参透明度,暖色深浅
javascript:(function(opacity){var opacity=opacity;var mask=document.createElement("div");mask.innerHTML=`<style>.filter-blue{z-index:2147483646;opacity:${opacity};mix-blend-mode:multiply;top:0px!important;left:0px!important;right:0px!important;bottom:0px!important;position:fixed!important;pointer-events:none!important;transition:opacity 0.15s ease 0s;background:rgb(255,185,105);overflow:hidden!important}</style>`;mask.className="filter-blue";document.body.appendChild(mask)})(0.6);
div点击穿透,CSS属性pointer-events :none;实现护眼模式, 夜间模式遮罩相关推荐
- 每次点击添加css动画,div点击添加css动画
div点击添加css动画 }#big_div{width:100%;height:100%;background-color:#00FF00; }.small_div{width:100%;heigh ...
- 【重识 HTML + CSS】基本 CSS 属性
[重识 HTML + CSS] CSS 简介 内联样式.文档样式表.外部样式表 @charset.@import 注释 HTML 和 CSS 的编写准则 设置网页的图标 常用 CSS 属性 初识 CS ...
- div增加鼠标点透,css设置点击穿透
需求:将一张照片盖到一个div上面,但同时下面div上面的点击事件不受影响. 这样就需要用到 CSS 的鼠标穿透属性:pointer-events: none,下面主要对pointer-events属 ...
- css:css属性pointer-events实现点击穿透
文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events pointer-events CSS 属性指定在什么情况下 (如果 ...
- 【前端点击穿透】pointer-events属性详解
什么是pointer-events? pointer-events 属性是一个指针属性,是用于控制在什么条件下特定的图形元素可以成为指针事件的目标. This CSS property,when se ...
- td外边加div为啥不隐藏_那些不常见,但却非常实用的 css 属性
(给前端大全加星标,提升前端技能) 作者:寒水寺一禅 https://segmentfault.com/a/1190000022851543 1.-webkit-line-clamp 可以把 块容器 ...
- 用css控制点击穿透
当开发遇到一种场景,比如在一个元素上添加遮罩层,但是点击在遮罩层上时,实际触发下方的元素点击事件,而不是遮罩层 可以用css属性 pointer-events 来控制; pointer-events: ...
- 前端 使用CSS属性,使Div上下左右移动指定像素
前言 前端 使用CSS属性,使Div上下左右移动指定像素 前端的Css属性真的太多了,很不容易记下,所以写一篇博客记录,加深记忆. 需求 上面是美工出的图 大概就是2个横着排列的div和分页器居中对齐 ...
- div阻止点击穿透+实现点击穿透
一.阻止点击穿透,上层点击时加上下面这句,阻止事件冒泡到父元素 event.stopPropagation(); 二.点击穿透到下面一层,不点击上层,为上层添加下面样式代码即可 pointer-eve ...
最新文章
- python工资条教程_python学习笔记--工资条发放软件
- docker安装mysql并实现远程访问
- c# out原理 ref_3-Unity入门学习之C#基础2「数据类型」
- Go开发之路 -- 指针类型
- 网页中嵌套网页flush_如何修改网页中的内容?
- shell只允许某些ipssh登录,配合iptables最好
- 跨站脚本攻击(Cross‐Site Scripting (XSS))实践
- oracle堆,oracle被一堆insert和update堵死解决方案
- JavaScript异步编程【下】 -- Generator、Async/await
- 《Linux内核设计与实现》 第八周读书笔记 第四章 进程调度
- vSphere 故障排除之工具篇
- 自学前端不用慌张!零基础自学前端必备手册,学成月薪12K
- Spring Boot 学习系列(01)—从0到1,只需两分钟
- 解决 jQuery 和其他库的冲突
- Android 显示原生Emoji
- 基于产生式系统的野人渡河问题求解
- Android 之HierarchyViewer - 4939
- 扰动观察法怎么写matlab,扰动观察法
- 如何在SuperMap iDesktop制作卫星地图
- 机器学习一脸懵笔记【05】概率论
热门文章
- 手游传奇刷元宝_战神传奇手游刷元宝方法技巧大全
- 你见过的最全面的Python重点知识总结!
- 报错解决——ValueError: row index was 65536, not allowed by .xls format
- 【三星篇】三星手机实用功能软件推荐
- Mac 常用软件推荐
- 短线王的盯盘宝怎么样_股票盯盘系统app怎么样
- VC版计算器(豪华界面)
- 1 进 2 出 HDMI 1.4 分配器,带 HDCP 引擎、抖动清除和信号中继
- 测试抑郁症软件,抑郁症测试app
- 手把手教你整合SSM实现一个简单的CRUD项目