江苏龙网

  1. 主页 > 生活百科 > >

5 种用 CSS 隐藏页面元素的方法( 二 )

css


现在 ， 将鼠标移到第一个块元素上面几次 ， 然后点击它 。这个操作将让第二个块元素显现出来 ， 它其中的数字将是一个大于 0 的数 。这是因为 ， 元素即使被这样设置成对用户隐藏 ， 还是可以通过 JAVAScript 来进行操作 。
position
假设有一个元素你想要与它交互 ， 但是你又不想让它影响你的网页布局 ， 没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局 ，  display 不影响布局但又无法直接交互——译者注） 。在这种情况下 ， 你只能考虑将元素移出可视区域 。这个办法既不会影响布局 ， 有能让元素保持可以操作 。下面是采用这 种办法的 CSS：
.hide { position: absolute; top: -9999px; left: -9999px;}下面的例子阐明了怎样通过绝对定位的方式隐藏元素 ， 并让它和前面的那个例子效果一样：
看 @SitePoint 提供的例子“用 position 属性隐藏元素”
这种方法的主要原理是通过将元素的 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 属性隐藏元素”
如果你把鼠标悬停在第一个元素上 ， 它依然可以影响第二个元素 ， 尽管第二个元素已经通过 clip-path 隐藏了 。如果你点击它 ， 它会移除用来隐藏的 class ， 让我们的元素从那个位置显现出来 。被隐藏元素中的文字仍然能够通过读屏软件读取 ， 许多 wordPress/ target=_blank class=infotextkey>WordPress 站点使用 clip-path 或者之前的 clip来实现专门为读屏软件提供的文字 。
虽然我们的元素自身不再显示 ， 它也依然占据本该占据的矩形大小 ， 它周围的元素的行为就如同它可见时一样 。记住用户交互例如鼠标悬停或者点击在剪裁区 域之外也不可能生效 。在我们的例子里 ， 剪裁区大小为零 ， 这意味着用户将不能与隐藏的元素直接交互 。此外 ， 这个属性能够使用各种过渡动画来实现不同的效果 。
结论
在这篇教程里 ， 我们看了 5 种不同的通过 CSS 隐藏元素的方法 。每一种方法都与其他几种有一点区别 。知道你想要实现什么有助于你决定采用哪一个属性 ， 随着时间推移 ， 你就能根据实际需求本能地选择最佳方式了 。

【5 种用 CSS 隐藏页面元素的方法】


推荐阅读


上一篇：借助minid工具优化Dockerfile分层

下一篇：整个家要消毒怎么弄呢,家里可以喷酒精消毒吗