css 鼠标穿透事件：pointer-events

最新推荐文章于 2024-07-25 19:08:16 发布

美酒没故事°

最新推荐文章于 2024-07-25 19:08:16 发布

阅读量4k

点赞数

分类专栏：前端原生：css

本文链接：https://blog.csdn.net/qq_42618566/article/details/102836096

版权

前端原生：css 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

发现个有意思的css属性：pointer-events
语法：

pointer-events: none 或者 auto;

特性：

阻止用户的点击动作产生任何效果
阻止缺省鼠标指针的显示
阻止CSS里的 hover 和 active 状态的变化触发事件
阻止JavaScript点击动作触发的事件

示例：

<!DOCTYPE html>
<html>
<head>
	<title>示例</title>
	<style>
	 a[href="http://example.com"] {
       pointer-events: none;
  	}
	</style>
</head>
<body>
   <ul>
	    <li><a href="https://www.baidu.com/">百度 能点击</a></li>
	    <li><a href="http://example.com">这是不能点击的链接</a></li>
	</ul>
</body>
</html>