Maison  >  Article  >  interface Web  >  Introduction à la propriété pointer-events en CSS3

Introduction à la propriété pointer-events en CSS3

青灯夜游
青灯夜游original
2018-09-25 18:02:372501parcourir

Ce chapitre vous présente un attribut très pratique en CSS3 : l'attribut CSS3 pointer-events. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Récemment, j'ai découvert un attribut CSS appelé pointer-events, qui est un attribut lié à JavaScript. Pointer-events est littéralement traduit par pointer event. Lorsque la valeur est définie sur none, il présente les caractéristiques associées suivantes.
Empêcher l'action de clic de l'utilisateur de produire un effet
Empêcher l'affichage du pointeur de la souris par défaut
Empêcher les changements d'état de survol et d'état actif en CSS de déclencher des événements
Empêcher les événements déclenchés par des actions de clic Javascript
N'est-il pas étonnant de voir combien de choses peuvent être faites avec CSS ? Jetons un coup d'œil à la situation de compatibilité.
IE 11+
Firefox 3.6+
Chrome 4.0+
Safari 6.0
Opera 15.0
iOS Safari 6.0
Navigateur Android 2.1+
Android Chrome 18.0+

Vue de rendu :https://runjs.cn/detail/9rxdbuin

Code :

<!DOCTYPE html>
<html> 
    <head> 
    <style>
      a.noLink{pointer-events: none;}
      .bottom { background: yellow; width: 100px; height: 100px; } 
      .top { width: 100px; height: 100px; position: absolute; top: 0; left: 0;background:rgba(0,0,0,.2);} 
      .top span{margin-top:50px;display:inline-block}
    </style>
    <script id="jquery_183" type="text/javascript" class="library" src="/js/jquery-1.8.3.min.js"></script>
    </head>
    <body> 
            <div>
                <!-- 下方div --> <div class="bottom"> <a href="www.baidu.com">bottom-百度</a> </div>
                <!-- 上方div --> <div class="top"><span>我是上层top</span></div> 
            <button id="btnP">
                添加pointer-events
                </button>
            </div>        
    </body> 
<script>
    $(&#39;#btnP&#39;).click(function(){
        $(&#39;.top&#39;).css(&#39;pointer-events&#39;, &#39;none&#39;)
    })
</script>
</html>

Ce qui précède est un pointeur CSS3- Un exemple d'introduction de l'attribut events Vous pouvez essayer de le compiler vous-même et voir l'effet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn