【CSS】禁用元素鼠标事件(例如实现元素禁用效果)

文章目录

    • 基本用法

基本用法

  • pointer-events 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件。
  • 实际运用中可以通过对auto none动态控制,来动态实现元素的禁用效果。
属性 描述
auto 与pointer-events属性未指定时的表现效果相同,对于 SVG 内容,该值与visiblePainted效果相同
none 元素永远不会成为鼠标事件的目标,包括移入、移出、点击事件等等
  • 示例:点击百度不会跳转
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一颗不甘坠落的流星title>
		<style>
			a[href="https://www.baidu.com/"]
			{
			  pointer-events: none;
			}
		style>
	<body>
		  <a href="https://blog.csdn.net/qq_45677671?spm=1011.2444.3001.5343">CSDNa>
		  <a href="https://www.baidu.com/">百度a>
	body>
	<script type="text/javascript">script>
html>
  • 针对 svg 标签专有属性

【CSS】禁用元素鼠标事件(例如实现元素禁用效果)_第1张图片

你可能感兴趣的:(CSS,笔记,css,前端,pointer-events)