您现在的位置是：网站首页> 编程资料编程资料

css不常见属性之pointer-events的使用方法_CSS教程_CSS_网页制作_

2023-11-04 210人已围观

简介这篇文章主要介绍了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 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                
                
                                            上一篇：基于CSS3实现的几个小loading效果 _css3_CSS_网页制作_
                                                                下一篇：使用css实现三角符号效果_CSS教程_CSS_网页制作_

您现在的位置是：网站首页> 编程资料编程资料

css不常见属性之pointer-events的使用方法_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢