css3 pointer-events:auto;详解

本文转载自查看原文 2021-03-04 14:20 801 css3

<style type="text/css">
    #div_grandfather{
        height : 250px;
        background: orange;
        width:300px;
        border:1px solid;
          pointer-events:none;
    }
    #div_parent{
        height:70%;
        background-color:#bbb;
        margin:30px;
        border: 1px solid;
   
  
    
    }
    #div_child{
        height:70%;
        background-color:deepskyblue;
        margin:30px;
        pointer-events:auto;
        
    }
</style>
<body>
    <div id="div_grandfather" onclick="alert('grandfather')">
        <div id="div_parent" onclick="alert('parent')">
            <div id="div_child" >
            </div>
        </div>
    </div>
</body>

https://codepen.io/a6965921/pen/vYyrGeP?editors=1010

 pointer-events:none;是隐蔽事件的

pointer-events:auto; 是开启事件的(允许一层层查找有没有事件)
从内到外 里面可以覆盖外面的

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 CSS3中的pointer-events 详解css3 pointer-events（阻止hover、active、onclick等触发事件来 CSS3教程:pointer-events属性值详解阻止穿透点击 CSS3：页面添加水印pointer-events pointer-events属性值详解解决移动端点击事件的穿透问题之CSS3新属性：pointer-events 浅谈css3有意思的属性pointer-events: none； css3 pointer-events（阻止hover、active、onclick等触发事件） (转)CSS3之pointer-events(屏蔽鼠标事件)属性说明 pointer-events: none