Home > Article > Web Front-end > How to hide div on click in css3
How to hide div on click in css3
- 青灯夜游Original
- 2021-12-15 12:17:122378browse
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
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>
: 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!