[CSS] Disable element mouse events (for example, to achieve element disable effect)

Article directory

basic usage

  • pointer-eventsProperty specifies under what conditions (if any) a particular graphical element can become a mouse event.
  • In actual application, the disabled effect of elements can be realized dynamically by controlling auto and nonedynamically.
Attributes describe
auto It has the same effect as when the pointer-events attribute is not specified. For SVG content, this value has the same effect as visiblePainted
none Elements are never targeted by mouse events, including move-in, move-out, click events, etc.
  • Example: Clicking on Baidu will not redirect
<!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">CSDN</a>
		  <a href="https://www.baidu.com/">百度</a>
	</body>
	<script type="text/javascript"></script>
</html>
  • Specific attributes for svg tags

insert image description here

Guess you like

Origin blog.csdn.net/qq_45677671/article/details/132292578