How to hide css elements

How to hide css elements? This article will introduce you to 5 ways to hide css elements, so that you can understand how you can hide css elements, and the nuances you need to remember when using these methods to hide elements. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s briefly introduce 5 ways to hide css elements, which are:

1. Use the opacity attribute to hide elements

2. Use the visibility attribute to hide elements

3. Use the display attribute to hide elements

4. Use the position attribute to hide elements

5. Use the clip-path attribute to hide elements.

Let’s introduce these 5 methods of hiding CSS elements in detail so that everyone can understand the subtle differences between them.

opacity attribute

The opacity attribute hides an element by setting its transparency. It's designed not to change the element's bounding box in any way. This means that setting the opacity to zero only visually hides the element; the element still takes its position and affects the layout of the page, and it also responds to user interaction.

.hide {
  opacity: 0;
}

If you plan to use the opacity attribute to hide an element from screen readers, unfortunately this is not possible. Because screen readers will read the element and all its contents just like every other element on the web page.

I should also mention that the opacity property is animated and used to create some great effects. Example:

HTML code:

<div>1</div>
<div class="o-hide">2</div>
<div>3</div>

css code:

.o-hide {
  opacity: 0;
  transition: all ease 0.8s;
}

.o-hide:hover {
  opacity: 1;
}

Rendering:

When hovering the mouse When stopped on the hidden second block, the element will smoothly transition from fully transparent to fully opaque. The module also sets the cursor:pointer to show that it can interact with it.

visibility attribute

The visibility attribute hides the element by setting whether it is visible. Setting the visibility attribute to hidden will hide our element.

The visibility attribute is the same as the opacity attribute. Hidden elements will still affect the layout of our web page. The only difference is that this time it won't capture any user interaction when the user is hidden. Additionally, the element will also be hidden from screen readers.

This property can also be animated as long as the initial state and final state have different values. This ensures that transitions between visibility states can be smooth rather than abrupt.

This demo shows the difference between visibility and opacity:

HTML code:

<div>1</div>
<div class="o-hide"><p>2</p></div>
<div>3</div>

css code:

.o-hide {
  visibility: hidden;
  transition: all ease 0.8s;
}
.o-hide:hover {
  visibility: visible;
}
.o-hide p {
  visibility: visible;
  margin: 0;
  padding: 0;
}

js code:

var oHide = document.querySelector(".o-hide");
var oHideP = document.querySelector(".o-hide p");
var count = oHideP.innerHTML;

oHide.addEventListener("click", function(){
    count++;
    oHideP.innerHTML = count;
});

Rendering:

Please note that if the attribute is explicitly set to visibility, the descendants of the element with visibility set to hidden will still be visible. Try hovering over the hidden element instead of the inner paragraph and you will see that the cursor does not change to a pointer. Additionally, if you try to click on the element, your click will not be responded to.

The

tag within the

<div>Hover!</div>
<div class="o-hide"><p>0</p></div>
<div>0</div>

.o-hide {
  display: none;
  transition: all ease 0.8s;
}

.o-hide:hover {
  display: block;
}

.o-hide p {
  display: block;
  margin: 0;
  padding: 0;
}

var count = 0;
var oHide = document.querySelector(".o-hide");
var firstDiv = document.querySelector("div:nth-child(1)");

firstDiv.addEventListener("mouseover", function(){
    count++;
    oHide.innerHTML = &#39;<p>&#39; + count + &#39;</p>&#39;;
});

firstDiv.addEventListener("click", function(){
  oHide.style.display = "block";
});

.o-hide {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.o-hide:hover {
  position: static;
}

var count = 0;
var oHide = document.querySelector(".o-hide");
var firstDiv = document.querySelector("div:nth-child(1)");

firstDiv.addEventListener("mouseover", function(){
    count++;
    oHide.innerHTML = count;
});

firstDiv.addEventListener("click", function(){
    oHide.style.position = "static";
});

.o-hide {
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}

var count = 0;
var oHide = document.querySelector(".o-hide");
var firstDiv = document.querySelector("div:nth-child(1)");

firstDiv.addEventListener("mouseover", function(){
    count++;
    oHide.innerHTML = count;
});


firstDiv.addEventListener("click", function(){
    oHide.className = "";
});