CSS Hide Element

المعرفة:: CSS الحالة::مؤرشفة

---

display: none

div {
  display: none;
}

This method doesn’t allow transition effects.

opacity + pointer-events + visibility

Instead of display: none, a combination of the three mentioned CSS properties can be used.

• opacity: Hide element visually.
• pointer-events: Make it inaccessible to mouse and keyboard.
• visibility: Hide it from screen readers.

div {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

To show the element again:

div {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}