爱游戏网页.css的pointer鼠标类型详解(支持IEfir

发布时间：2024-04-25 22:37:18 来源：爱游戏网页入口 作者：爱游戏版本

css的pointer鼠标类型详解(支持IEfir

　　是否曾经有过这样的经历：把一个元素置于另一个元素之上，而希望下面的那个元素成为可点击的？现在，利用css的pointer-events属性即可做到。

　　Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。

　　如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素，就像这样：

　　我将Pointer-events行为的演示放在一起，在那里你可以自己测试它。正如你看到的那样，右边灰色的盒子阻止单击下面的链接。但是，如果你单击checkbox对其禁用Pointer-events。下面链接的click事件将被触发。

　　如果你进入Twitter（国内好像不能登录到该网站，如下图所示）的开始页，而且没有登录。在底部你将看到很多列出的标签。在右边的一个元素，有一张褪色的图片覆盖其上产生这样的效果。不幸的是下面的链接无法点击。如果你在css中添加一行代码，就可以了。

　　系统默认鼠标指针样式外，可以通过CSS设置图片为鼠标指针，常见有些网站鼠标指针是各种各样小图片样式，当然这个是通过css cursor设置鼠标样式。

　　TOP鼠标指针样式控制设置是比较常用的，比如日常我们在DIV+CSS布局时候，我们希望鼠标指向某个局部span标签对象时候，鼠标指针光标就变为手指状态，这个时候我们就对对象span设置cursor: pointer即可。以上我们图例展示常用的鼠标光标形状与css单词，希望布局时候更加自身需要选择设置鼠标指针样式。需要注意是，光标切记勿滥用，也不要轻易设置自定义图片为鼠标样式这样会将网页造成复杂与不符合用户体验感觉，切记光标慎用。