Here are some CSS properties, which looks similar. It's hard to find the difference between them.
Like:- Visibility:hidden;
Opacity:0;
Display:none;
1. Visibility:hidden;
Visibility:hidden property hides the element in which this property is used but still occupies the space in the file.
It is only hidden from the user but exist in the DOM. User can not access the child element.
2. Opacity:0;
By using Opacity:0 property, the element looks like hidden but user can access the child element.
It also occupies the space in the DOM(Document Object Model).
If there is anchor tag which is given with the property Opacity:0, will be clickable but will not be visible to the user.
3. Display:none;
If an element is having the property display:none then it will not be displayed to the user as well as will not occupy space in the DOM.
Display:none means the particular element is finished from the entire page untill we will not manipulate it from javascript or by another method.
Below is the example which will more clear with the differences between them-
HTML-
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<meta name="description" content="CSS Visibility/Display/Opacity" />
<meta charset="utf-8">
<title>Difference</title>
</head>
<body>
Visibility
<div class="main">
<div class="visibility">
<a href="http://google.com">Visibility</a>
</div>
</div>
Opacity
<div class="main">
<div class="opacity">
<a href="http://google.com">Opacity</a>
</div>
</div>
Display
<div class="main">
<div class="display">
<a href="http://google.com">Display</a>
</div>
</div>
</body>
</html>
CSS-
div.main{
border: 1px solid #000;
margin: 8px;
width:60px
}
.visibility{
visibility: hidden;
}
.display{
display: none;
}
.opacity{
opacity: 0
}
0 Comment(s)