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

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

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

本文主要包含css display属性,css属性选择器,css属性,css position属性,css定位属性等相关知识,佚名 希望在学习及工作中可以帮助到您

而本文要说的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来屏蔽一些十分关键的触发动作,因为这个样式可以通过浏览器控制台删除掉!

</div>

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

  • 深入理解css中vertical-align属性
  • 谈谈对css属性box-sizing的了解
  • CSS的pointer-events属性详细介绍(作用和注意事项)
  • CSS中几个与换行有关的属性简明总结
  • 常用的四种CSS透明属性介绍

相关文章

  • 2017-06-02检测用户浏览器是否支持CSS3的方法
  • 2017-06-02纯CSS3实现3D旋转书本效果
  • 2017-06-02纯CSS改变webkit内核浏览器的滚动条样式
  • 2017-06-02一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
  • 2017-06-02css3实现超立体3D图片侧翻倾斜效果
  • 2017-06-02移动端Web页面的CSS3 flex布局快速上手指南
  • 2017-06-02CSS3中使用RGBa来调节透明度的教程
  • 2017-06-02CSS3 选择器 伪类选择器介绍
  • 2017-06-02CSS3绘制有活力的链接下划线
  • 2017-06-02通过CSS3的object-fit来调整图片适配尺寸的技巧简介

文章分类

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

最近更新的内容

    • 用CSS3的box-reflect设置文字倒影效果的方法讲解
    • 用CSS3绘制三角形的简单方法
    • 使用CSS3制作一个简单的Chrome模拟器
    • CSS3制作炫酷的自定义发光文字
    • CSS3线性渐变简单实现以及该属性在浏览器中的不同
    • CSS3的Border-radius轻松制作圆角
    • CSS3三角形运用
    • 老生常谈CSS中的长度单位
    • css实例教程 一款纯css3实现的超炫动画背画特效
    • 纯CSS3实现手风琴风格菜单具体步骤

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

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