css不常见属性之pointer-events
时间:2019-11-11
本文章向大家介绍css不常见属性之pointer-events,主要包括css不常见属性之pointer-events使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
MDN 上介绍为 CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。
pointer-events 属性值有:
/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
其中默认属性为 auto。 当值为none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
使用场景
抛却只适用于svg的值,说一说 none 的使用场景。 mdn上的解释不太好理解。 网友叙帝利 给出了一种使用场景。
我这里还有一中使用场景是 当用div元素通过css样式模拟按钮时,可以使用 pointer-event: none
模拟button禁止点击。
比如:
// html
<div class="point" onclick="alert('ok')提交申请</div>
.point {
width: 1.8rem;
height: .44rem;
margin: 0 auto;
margin-top: 0.8rem;
text-align: center;
line-height: .44rem;
border-radius: 22px;
color: #fff;
background-color: rgba(67,76,94,.43);
pointer-events: none;
}
此时该div的样子,如果不设置pointer-events: none; 只是样子不可点击,点击还是会触发事件响应的。 加上则不会响应click事件了。
原文地址:https://www.cnblogs.com/jlfw/p/11834457.html
- 排序算法的实现(C/C++实现)
- [开源] 分享导出博客园文章成本地 Markdown 文件存储的工具
- 单表代替密码原理及算法实现
- 【Android开发学习笔记之一】5大布局方式详解
- Selenium3源码之common下action_chains.py模块分析
- 图的简单应用(C/C++实现)
- 一个很easy的脚本--php获取服务器端的相关信息
- Kubernetes网络解决方案的比较
- OSX 上初步尝试 asp.net 5
- 一个粗心的Bug,JSON格式不规范导致AJAX错误
- weiapi2.2 HelpPage自动生成接口说明文档和接口测试功能
- C#通过WMI的wind32 的API函数实现msinfo32的本地和远程计算机的系统日志查看功能
- C#通过WMI的wind32 的API函数实现msinfo32的本地和远程计算机的系统摘要信息查看功能
- Envoy架构概览(5):负载均衡
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android Intent封装的实例详解
- Android自定义Drawable实现圆角效果
- Android ApplicationInfo 应用程序信息的详解
- Android UI控件Switch的使用方法
- Android如何读写CSV文件方法示例
- Android 静默安装和卸载的方法
- Android自定义单例AlertDialog详解
- Android Build类的详解及简单实例
- Android使用CrashHandler来获取应用的crash信息的方法
- 数据魔术师小白零基础实现简单人脸识别
- Android编程实现XML解析与保存的三种方法详解
- 浅谈关于Android路由的实现
- Android中EditText禁止输入表情的实例代码
- Android仿微信右滑返回功能的实例代码
- 算法复现·推荐算法 | DeepFM for CTR Prediction