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;  
}  

Comments

Comments