• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS的pointer-events属性详细介绍(作用和注意事项)

CSS的pointer-events属性详细介绍(作用和注意事项)

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,pointer-events等相关知识,佚名 希望在学习及工作中可以帮助到您

而本文要说的pointer-events的风格更像JavaScript,它能够:

1.阻止用户的点击动作产生任何效果
.阻止缺省鼠标指针的显示
3.阻止CSS里的hover和active状态的变化触发事件
4.阻止JavaScript点击动作触发的事件

一个CSS属性能做所有的这么多事情!

The CSS

这个pointer-events属性有很多可以使用的属性值,但大部分都是针对SVG的:auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。其中none值能阻止点击、状态变化和鼠标指针变化:

一些需要注意的关于pointer-events的事项:

1.子元素可以声明pointer-events来解禁父元素的阻止鼠标事件限制。
2.如果你对一个元素设置了click事件监听器,然后你移除了pointer-events样式声明,或把它的值改变为auto,监听器会重新生效。基本上,监听器会遵守pointer-events的设定。

测试代码:


我第一次注意到pointer-events属性是在Firefox Marketplace网站上,他们拿它来禁止按钮的点击,这样的好处是样式上也得到了控制。当然,不要使用pointer-events来屏蔽一些十分关键的触发动作,因为这个样式可以通过浏览器控制台删除掉!

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06div与span的区别和使用示例
  • 2017-08-06对于一些css样式的巧妙方法进行总结(推荐)
  • 2017-08-06CSS3实现多背景展示效果通过CSS3定位多张背景
  • 2017-08-06css教程制作css圆角边框(兼容全部浏览器)
  • 2017-08-06css3实现可滑动跳转的分页插件示例
  • 2017-08-06纯CSS实现漂亮的下拉导航效果代码
  • 2017-08-06css 标题一行图片 两行文字的排列方法以及相关问题处理
  • 2017-08-06CSS3 倾斜的网页图片库实例教程
  • 2017-08-06div css布局命名时尽量避免下划线
  • 2017-08-06css样式图片、渐变、相关小知识(必看)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS学习之五 定位布局
    • 27款经典的CSS框架小结 网页制作必备
    • CSS3制作文字半透明倒影效果的两种实现方式
    • CSS的font-size属性及其em值的使用
    • 谈谈对css属性box-sizing的了解
    • css grid 布局
    • 利用CSS3实现开门效果实例源码
    • css实现的滑动鼠标到img后切换图片移开恢复默认
    • csshover.htc可以解决ie6下hover不起作用等兼容问题
    • 你值得拥有的CSS下拉菜单效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有