5 ways to hide page elements with CSS

There are many ways to hide page elements using CSS. You can set opacity to 0, visibility to hidden, display to none or position to absolute and then set the position to the invisible area.

Have you ever wondered why we have so many techniques to hide elements, but they all seem to achieve the same effect? Each method actually has some subtle differences from the others, and these differences determine which method is used in a specific situation. This tutorial will cover the small differences you need to keep in mind so you can choose which of the above methods to hide elements based on your situation.

Opacity

The opacity attribute means to set the transparency of an element. It is not designed to change the bounding box of an element. This means that setting opacity to 0 only visually hides the element. The element itself still occupies its own position and contributes to the layout of the web page. It will also respond to user interaction.

.hide {
  opacity: 0;
}

If you plan to use the opacity attribute to hide elements in screen reading software, unfortunately, you can't. The element and all its content will be read by screen readers, just like other elements on the web page. In other words, elements behave as if they were opaque.

I would also like to remind you that the opacity property can be used to achieve some great animations. Any element with an opacity attribute value less than 1 also creates a new stacking context.

Look at the following example:

Look at the example provided by @SitePoint "Using opacity to hide elements"

​codepen.io/SitePoint/pen/bedZrR/

When your mouse moves over the hidden 2nd block, the element state smoothly transitions from fully transparent to fully opaque. The block also has its cursor property set to pointer, which indicates that the user can interact with it.

Visibility

The second attribute to talk about is visibility. Setting its value to hidden will hide our element. Like the opacity attribute, hidden elements will still have an effect on our web page layout. The only difference from opacity is that it does not respond to any user interaction. Additionally, elements will be hidden in screen reading software.

This property can also achieve animation effects, as long as its initial and end states are different. This ensures that the transition animation between visibility state switches can be time-smooth (in fact, this can be used to use hidden to implement delayed display and hiding of elements - Translator's Note).

.hide {
   visibility: hidden;
}

The following example demonstrates the difference between visibility and opacity:

See the example provided by @SitePoint "Using visibility to hide elements"

codepen.io/SitePoint/pen/pbJYpV/

Note that if the visibility of an element is set to hidden and you want to display one of its descendant elements, you only need to explicitly set the visibility of that element to visible (such as .o-hide p in the example - translation Author's note). Try hovering only on the hidden element and not on the number in the p tag. You will find that your mouse cursor does not turn into a finger. At this time, when you click the mouse, your click event will not be triggered.

The

tag inside the

tag can still capture all mouse events. Once your mouse moves over the text,

itself becomes visible and the event registration takes effect.

Display

The display attribute truly hides the element according to the meaning of the word. Setting the display property to none ensures that the element is not visible and not even the box model is generated. Using this attribute, hidden elements do not occupy any space. Not only that, once display is set to none, any direct user interaction on the element will not be effective. In addition, screen reading software will not read the content of the element. This way the effect is as if the element doesn't exist at all.

Any descendant elements of this element will also be hidden. Adding a transition animation to this property has no effect; any switch between its different state values ​​will always take effect immediately.

​However, please note that this element can still be accessed through the DOM. So you can manipulate it through the DOM just like any other element.

.hide {
   display: none;
}

Look at the following example:

Example provided by @SitePoint "Use display to hide elements"

​codepen.io/SitePoint/pen/zBGbjb/

You will see that there is a

element inside the second block element, and its own display property is set to block, but it is still invisible. This is another difference between visibility:hidden and display:none. In the previous example, explicitly setting the visibility of any descendant element to visible can make it visible, but display does not do this. No matter what its own display value is, as long as the ancestor element's display is none, they will all be visible. Invisible.

　　现在，将鼠标移到第一个块元素上面几次，然后点击它。这个操作将让第二个块元素显现出来，它其中的数字将是一个大于 0 的数。这是因为，元素即使被这样设置成对用户隐藏，还是可以通过 JavaScript 来进行操作。

　Position

　　假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互——译者注）。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。下面是采用这种办法的 CSS：

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

　　下面的例子阐明了怎样通过绝对定位的方式隐藏元素，并让它和前面的那个例子效果一样：

　　看 @SitePoint 提供的例子“用 position 属性隐藏元素”

　　codepen.io/SitePoint/pen/QEboZm/

　　这种方法的主要原理是通过将元素的 top 和 left 设置成足够大的负数，使它在屏幕上不可见。采用这个技术的一个好处（或者潜在的缺点）是用它隐藏的元素的内容可以被读屏软件读取。这完全可以理解，是因为你只是将元素移到可视区域外面让用户无法看到它。

　　你得避免使用这个方法去隐藏任何可以获得焦点的元素，因为如果那么做，当用户让那个元素获得焦点时，会导致一个不可预料的焦点切换。这个方法在创建自定义复选框和单选按钮时经常被使用。（用 DOM 模拟复选框和单选按钮，但用这个方法隐藏真正的 checkbox 和 radio 元素来“接收”焦点切换——译者注）

　Clip-path

　　隐藏元素的另一种方法是通过剪裁它们来实现。在以前，这可以通过 clip 属性来实现，但是这个属性被废弃了，换成一个更好的属性叫做 clip-path。Nitish Kumar 最近在 SitePoint 发表了“介绍 clicp-path 属性”这篇文章，通过阅读它可以了解这个属性的更多高级用法。

　　记住，clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要更低。使用 clip-path 属性来隐藏元素的代码看起来如下：

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

　　下面是一个实际使用它的例子：

　　看 @SitePoint 提供的例子“用 clip-path 属性隐藏元素”

　　http://codepen.io/SitePoint/pen/YWXgdW/

　　如果你把鼠标悬停在第一个元素上，它依然可以影响第二个元素，尽管第二个元素已经通过 clip-path 隐藏了。如果你点击它，它会移除用来隐藏的 class，让我们的元素从那个位置显现出来。被隐藏元素中的文字仍然能够通过读屏软件读取，许多 WordPress 站点使用 clip-path 或者之前的 clip 来实现专门为读屏软件提供的文字。

　　虽然我们的元素自身不再显示，它也依然占据本该占据的矩形大小，它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不可能生效。在我们的例子里，剪裁区大小为零，这意味着用户将不能与隐藏的元素直接交互。此外，这个属性能够使用各种过渡动画来实现不同的效果。

　结论

　　在这篇教程里，我们看了 5 种不同的通过 CSS 隐藏元素的方法。每一种方法都与其他几种有一点区别。知道你想要实现什么有助于你决定采用哪一个属性，随着时间推移，你就能根据实际需求本能地选择最佳方式了。如果你对于隐藏元素的这些方法还有任何问题，请在评论中留言。

The above is the detailed content of 5 ways to hide page elements with CSS. For more information, please follow other related articles on the PHP Chinese website!