phppointer,分享6篇关于pointer属性的介绍

其实早知道这个属性&＃xff0c;但是一直没有去研究过。今天正好在twitter看到这个词&＃xff0c;就去研究了下&＃xff0c;正好解决了目前遇到的一个小难题&＃xff0c;所以分享下。嗯&＃xff0c;其实这是个比较简单的CSS3属性。来看下我对pointer属性的详细介绍。

首先&＃xff0c;上图是某东商城的商品列表页中的商品&＃xff0c;在右上角有一个“惊爆价”的图标&＃xff0c;大家都知道这是用一个标签在绝对定位上去的&＃xff0c;会遮住下面的商品图片&＃xff0c;鼠标移到“惊爆价”图片是点击不了后面图片的链接的&＃xff0c;当然我们也可以给这个图标也加上链接&＃xff0c;这样就能解决问题。(今天可不是说这么简单的事情哦&＃xff0c;我们继续)

现代浏览器里CSS的职责范围和Javascript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像Javascript&＃xff0c;它能够&＃xff1a;

1.阻止用户的点击动作产生任何效果

2.阻止缺省鼠标指针的显示

3.阻止CSS里的hover和active状态的变化触发事件

4.阻止Javascript点击动作触发的事件

一个CSS属性能做所有的这么多事情&＃xff01;

在自行设置的p或者其他标签中&＃xff0c;为了更好的体验效果&＃xff0c;会将在滑动过程中&＃xff0c;将鼠标变为手势

简单总结下css对应的样式。

所在的p中&＃xff0c;添加cursor:pointer即可。

在我的记忆中pointer-events就是用来进行事件穿透的&＃xff0c;也就是说&＃xff0c;如果给父元素设置了pointer-events:none&＃xff0c;那么父元素不再监听鼠标事件事件(类似于touch,click这样的)。

需要这样做的情况&＃xff0c;通常是我们想“穿透”父层&＃xff0c;直接点击子元素时&＃xff0c;父元素会当作什么也没有发生一样。这是我以前的知识体系中所收集的信息。现在看来也没有错&＃xff0c;只是这不完整。

// 屏蔽点击$(&＃39;body&＃39;).css(&＃39;pointer-events&＃39;,&＃39;none&＃39;);

//恢复默认$(&＃39;body&＃39;).css(&＃39;pointer-events&＃39;,&＃39;auto&＃39;);

用处&＃xff1a; 可以在弹出层的时候或者fixed定位时&＃xff0c;设置下面元素的鼠标事件

绝对定位元素盖住链接或添加某事件handle的元素后&＃xff0c;那么该链接的默认行为(页面跳转)或元素事件将不会被触发。

现在Firefox3.6&＃43;/Safari4&＃43;/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为

我们在DIV CSS布局时候&＃xff0c;我们会遇到对对象内鼠标指针光标进行控制&＃xff0c;比如鼠标经过指针变为手指形状等样式&＃xff0c;接下来我们介绍鼠标指针样式cursor控制。系统默认鼠标指针样式外&＃xff0c;可以通过CSS设置图片为鼠标指针&＃xff0c;常见有些网站鼠标指针是各种各样小图片样式&＃xff0c;当然这个是通过css cursor设置鼠标样式。

pointer属性的相关问答&＃xff1a;

【相关推荐】