简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

How to hide div on click in css3

青灯夜游
Release： 2021-12-15 12:17:12
Original
2369 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：
css3 Click
source：php.cn
Previous article：How to achieve animation effect of changing width in css3 Next article：How to set background to gradient color in css3
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
Latest Articles by Author
Latest Issues
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！