How to hide div on click in css3
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to achieve wave effect with pure CSS3? (code example)
Jun 28, 2022 pm 01:39 PM
How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!
How to set multiple timers on iPhone iOS 17
Sep 18, 2023 am 09:01 AM
In iOS 17, you can set multiple timers on your iPhone using the Clock app, or use Siri to set it hands-free. We discuss both in this article. Let's take a look at them. Set Multiple Timers on iPhone Using the Clock App Open the Clock app on your iPhone and tap the Timers tab in the lower right corner. Now, set the hours, minutes, and seconds. You can use the "Label" and "When does the timer end" options to set a name for the timer and a preferred tone when the timer completes. This will help you differentiate between timers. Once done, click the "Start" button. Then, click the "+" icon in the upper right corner. Now, repeat the above steps to set multiple timers on iPhone. You can also browse
Use CSS skillfully to realize various strange-shaped buttons (with code)
Jul 19, 2022 am 11:28 AM
This article will show you how to use CSS to easily realize various weird-shaped buttons that appear frequently. I hope it will be helpful to you!
How to Make a Shopping List in the iOS 17 Reminders App on iPhone
Sep 21, 2023 pm 06:41 PM
How to Make a GroceryList on iPhone in iOS17 Creating a GroceryList in the Reminders app is very simple. You just add a list and populate it with your items. The app automatically sorts your items into categories, and you can even work with your partner or flat partner to make a list of what you need to buy from the store. Here are the full steps to do this: Step 1: Turn on iCloud Reminders As strange as it sounds, Apple says you need to enable reminders from iCloud to create a GroceryList on iOS17. Here are the steps for it: Go to the Settings app on your iPhone and tap [your name]. Next, select i
![How to set up my business card in Contacts on iPhone [2023]](https://img.php.cn/upload/article/000/465/014/169538863364905.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
How to set up my business card in Contacts on iPhone [2023]
Sep 22, 2023 pm 09:17 PM
With My Business Cards in iOS, you can create a personalized contact card that Siri and other services recognize and associate with you and your phone number. With the introduction of contact posters in iOS17, My Cards becomes very important as it is now used to create your contact posters. If you're eager to get your contact poster up and running, you have to start by setting up My Business Card. We'll walk through how to create a My Business Card and how to make it work smoothly with Siri and your contact poster. How to Set Up My Business Cards in Contacts on iPhone [2023] If you are setting up My Business Cards on your iPhone for the first time, you must do it through the Contacts app only
![How to turn off alarms on iPhone [2023]](https://img.php.cn/upload/article/000/465/014/169259550735100.png?x-oss-process=image/resize,m_fill,h_207,w_330)
How to turn off alarms on iPhone [2023]
Aug 21, 2023 pm 01:25 PM
Since the advent of smartphones, they have undoubtedly replaced alarm clocks. If you own an iPhone, you can use the Clock app to easily set as many alarms for multiple occasions throughout the day. The app lets you configure the alarm time, the tone, how often it repeats, and whether you want to delay them using the Snooze option. If you want to turn off the alarm you have set, the following post should help you disable and delete regular alarms and wake-up alarms on your iPhone. How to Turn Off a Regular Alarm on iPhone By default, when you add an alarm on the Clock app or ask Siri to add an alarm for you, you're actually creating a regular alarm. You can create as many alarm clocks on your iPhone as you like and put them
How to hide elements in css without taking up space
Jun 01, 2022 pm 07:15 PM
Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.
How to change contact photos on iPhone
Jun 08, 2023 pm 03:44 PM
iOS17 is finally here, and it includes a lot of new features. Let's learn how to change contact photos on iPhone in today's tutorial. Apple's recent WWDC 2023 event unveiled a slew of exciting products and upcoming software updates. One of the notable features of iOS 17 is the option to customize your contact photos and posters, providing a unique way to greet others when they receive a call from you on their iPhone. This innovative feature for iOS is designed to make phone calls more personal and user-friendly, allowing you to choose how they appear on the recipient's screen. If you're eager to get your hands on this new feature and greet your loved ones in a personalized way when making calls, here's how to add it to your iPhone
