Maison >interface Web >tutoriel CSS >Introduction à la propriété pointer-events en CSS3
Introduction à la propriété pointer-events en CSS3
- 青灯夜游original
- 2018-09-25 18:02:372534parcourir
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>
$('#btnP').click(function(){
$('.top').css('pointer-events', 'none')
})
</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!