How to hide div on click in css3

青灯夜游
Release: 2021-12-15 12:17:12
Original
2385 people have browsed it

In css3, you can use the ":active" selector and display attribute to achieve the effect of clicking to hide the div. You only need to add "" to the div element

How to hide div on click in css3

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

In CSS3, you can use the ":active" selector and display attribute to achieve the effect of clicking to hide the div.

Implementation code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			div{
				border: 1px solid red;
				background-color: #FFC0CB;
			}
			div:active{
				display: none;
			}

		</style>
	</head>
	<body>
		<div>点击隐藏div元素</div>

	</body>
</html>
Copy after login

How to hide div on click in css3

: active selector

active’s English interpretation is “active” , which means click on the mouse.

After setting the element to display:none, the element will disappear completely on the page, and the space originally occupied by the element will be occupied by other elements, which means it will cause the browser to Reflow and redraw.

(Learning video sharing: css video tutorial)

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template