Shulou(Shulou.com)06/02 Report--

Most people do not understand the knowledge points of this article "how to hide css elements", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to hide css elements" article.

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

1. Use the opacity attribute to hide the element

2. Use the visibility attribute to hide the element

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 take a look at these five ways to hide css elements in detail to let you know the nuances between them.

Opacity attribute

The opacity attribute hides the element by setting its transparency. Its design does not change the bounding box of the element in any way. This means that setting opacity to zero only visually hides the element; the element still occupies its position and affects the layout of the page, and it responds to user interaction.

.hide {

Opacity:0

}

Unfortunately, this is not possible if you are going to use the opacity attribute to hide the elements in the screen reader. Because the screen reader will read the element and all its contents, just like all other elements on the web page.

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

HTML Code:

one

two

three

Css Code:

. o-hide {

Opacity:0

Transition:allease0.8s

}

. o-hide:hover {

Opacity:1

}

When you hover over the hidden second block, the element transitions smoothly from a completely transparent state to a completely opaque state. The module also sets up cursor:pointer to show that it can interact with it.

Visibility attribute

The visibility property hides the element by setting whether it is visible or not. Our element is hidden when the value of the visibility property is set to hidden.

The visibility attribute is the same as the opacity attribute, and hidden elements can still affect the layout of our pages. The only difference is that this time when the user is hidden, it does not capture any user interaction. In addition, this element will also be hidden from screen readers.

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

This demo shows the difference between visibility and opacity:

HTML Code:

one

two

three

Css Code:

. o-hide {

Visibility:hidden

Transition:allease0.8s

}

. o-hide:hover {

Visibility:visible

}

. o-hidep {

Visibility:visible

Margin:0

Padding:0

}

Js Code:

VaroHide=document.querySelector (".o-hide")

VaroHideP=document.querySelector (".o-hidep")

Varcount= oHideP[xss _ clean]

OHide.addEventListener ("click", function () {

Count++

OHideP [XSS _ clean] = count

})

The above is about the content of this article on "how to hide css elements". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.