How to disable click events in css-CSS Tutorial-php.cn

How to disable click events in css

青灯夜游

Release： 2023-01-05 16:09:08

Original

5535 people have browsed it

In CSS, you can use the pointer-events attribute to prohibit click events. You only need to add the "pointer-events:none;" style to the element so that the element can never become the target of mouse events, thereby prohibiting mouse events. That’s it.

How to disable click events in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can use the pointer-events attribute to disable click events.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			a.disabled {
				pointer-events: none;
				cursor: default;
				filter: alpha(opacity=50);
				/*IE滤镜，透明度50%*/
				-moz-opacity: 0.5;
				/*Firefox私有，透明度50%*/
				opacity: 0.5;
				/*其他，透明度50%*/
			}
		</style>
	</head>

	<body><br/><br/>
		<a href="#" class="disabled">不可点击的a链接</a><br/><br/>
		<a href="#">正常的a链接</a>
	</body>

</html>

Copy after login

Rendering:

How to disable click events in css

pointer-events:none What is it?

The pointer-events attribute specifies under what circumstances (if any) a specific graphic element can be the target of a mouse event.

pointer-events:none As the name implies, it means goodbye to mouse events. Elements are never the target of mouse events. The CSS attribute is applied to the element, and the links, clicks, etc. all become "Floating Cloud Brand Soy Sauce".

However, when the pointer-events attribute of its descendant elements specifies other values, the mouse event can point to the descendant element. In this case, the mouse event will trigger the event detection of the parent element during the capture or bubbling phase. hearing device.

(Learning video sharing: css video tutorial)

The above is the detailed content of How to disable click events in css. For more information, please follow other related articles on the PHP Chinese website!