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