隐藏页面元素常用方法,隐藏页面元素的

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

2016/06/12 · CSS ·
隐藏元素

初稿出处: Baljeet
Rathi   译文出处:十年踪迹(@十年踪迹)   

用 CSS 隐藏页面元素有许两种形式。你可以将 opacity 设为 0、将
visibility 设为 hidden、将 display 设为 none 或者将 position
设为 absolute 然后将地方设到不可知区域。

您有没有想过,为啥大家要有如此多技术来隐藏元素,而它们看起来都落实的是千篇一律的作用?每一种艺术其实与任何方法之间都有部分微小的两样,这几个差距决定了在一个一定的场合下利用哪一个办法。那篇教程将掩盖到那多少个你须要牢记的轻微分化点,让您依据差别情形接纳方面这个办法中符合的方法来隐藏元素。

用 CSS 隐藏页面元素有不少种艺术。你可以将opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将地方设到不可知区域。

英文原稿:Five Ways to Hide Elements in
CSS
作者:Baljeet
Rathi
翻译:十年踪迹
原文地址:http://www.zcfy.cc/article/457

前言

用 CSS 隐藏页面元素有不可胜举种方法。你可以将 opacity 设为 0、将 visibility
设为 hidden、将 display 设为 none 或者将 position 设为 absolute
然后将地方设到不可知区域。

不过各样方法此前是存在着微薄的不等,这一个不相同决定了在一个特定的场合下使用哪一个艺术。上边我的那篇小说就给大家说圣元(Synutra)下他们中间的分别吗,让大家能依照场所来摘取适合的方式.

 

Opacity

opacity
属性的情致是设置一个要素的透明度。它不是为改观元素的边界框(bounding
box)而设计的。那意味将 opacity 设为 0
只好从视觉上隐藏元素。而要素本身如故占据它和谐的地点并对网页的布局起效果。它也将响应用户交互。

CSS

.hide { opacity: 0; }

1
2
3
.hide {
  opacity: 0;
}

即使您打算拔取 opacity
属性在读屏软件中隐藏元素,很不幸,你并不可以快心满意。元素和它抱有的始末会被读屏软件阅读,就如网页上的别样因素那样。换句话说,元素的一颦一笑就和它们不透明时一致。

自我还要提示一句,opacity 属性可以用来促成部分意义很棒的卡通片。任何
opacity 属性值小于 1 的元素也会创立一个新的堆叠上下文(stacking
context)。

看上边的例证:

看 @SitePoint 提供的例子“用 opacity
隐藏元素”

当您的鼠标移到被隐形的第 2
个的区块上,元素状态平滑地从一点一滴透明过渡到完全不透明。区块也将 cursor
属性设置为了 pointer,那申明了用户可以与它交互。

Opacity

用 CSS
隐藏页面元素有广大种办法。你可以将opacity设为0、将visibility设为hidden、将display设为none或者将position设为absolute然后将地点设到不可知区域。

Opacity

该属性的意思是寻找或安装对象的不透明度当她的透明度为0的时候,视觉上它是过眼烟云了,不过她照样占据着老大地方,并对网页的布局起效果。它也将响应用户交互。添加了该属性的元素,它的背景和要素内容也是会跟着变化的.大家得以行使他的这一特点制作一些很棒的动画效果,我那边制作的一个粗略的小效用,代码如下:

css代码:

.green{
        width: 100px;
        height: 100px;
        background-color:#a0ee00;
        text-align: center;
        float: left;
        margin: 20px;
        line-height:100px;
    }
    .myDiv{
        opacity: 0;
        transition:all ease 1s;
    }
    .myDiv:hover{
        opacity: 1;
    }
    .show{
        opacity: 0;
        animation:showtime infinite 4s;
        -webkit-animation:showtime infinite 4s;
        -moz-animation:showtime infinite 4s;
        -o-animation:showtime infinite 4s;
    }
    @keyframes showtime{
        25%{
            opacity: 0.5;
        }
        50%{
            opacity: 1;
        }
        75%{
            opacity: 0.5;
        }
        100%{
            opacity: 0;
        }
    }
        @-webkit-keyframes showtime{
        25%{
            opacity: 0.5;
        }
        50%{
            opacity: 1;
        }
        75%{
            opacity: 0.5;
        }
        100%{
            opacity: 0;
        }
    }
        @-moz-keyframes showtime{
        25%{
            opacity: 0.5;
        }
        50%{
            opacity: 1;
        }
        75%{
            opacity: 0.5;
        }
        100%{
            opacity: 0;
        }
    }
        @-o-keyframes showtime{
        25%{
            opacity: 0.5;
        }
        50%{
            opacity: 1;
        }
        75%{
            opacity: 0.5;
        }
        100%{
            opacity: 0;
        }
    }

 

html代码:

 

<div class="green">1</div>
<div class="myDiv green">2</div>
<div class="green">3</div>
<div class="show green">4</div>

 

留神:该属性是包容IE9以上的浏览器,IE8
以及更早的本子支持代表的 filter 属性,例如: filter:Alpha(opacity=50)。

Visibility

首个要说的性质是 visibility。将它的值设为 hidden
将藏匿我们的元素。就像是 opacity隐藏页面元素常用方法,隐藏页面元素的。
属性,被埋伏的元素照旧会对我们的网页布局起效果。与 opacity
唯一分化的是它不会响应任何用户交互。其它,元素在读屏软件中也会被埋伏。

其一特性也可以完成动画效果,只要它的开始和终止状态分裂。那确保了
visibility
状态切换之间的对接动画可以是时刻平滑的(事实上可以用那一点来用 hidden
达成要素的推迟显得和隐形——译者注)。

CSS

.hide { visibility: hidden; }

1
2
3
.hide {
   visibility: hidden;
}

上边的事例演示了 visibilityopacity 有哪些的不等:

看 @SitePoint 提供的事例“用 visibility
隐藏元素”

留意,假设一个要素的 visibility 被设置为
hidden,同时想要展现它的某个子孙元素,只要将丰硕元素的 visibility
显式设置为 visible 即可(就像是例子里面的 .o-hide p——译者注)。尝试只
hover 在隐藏元素上,不要 hover 在 p
标签里的数字上,你会发现你的鼠标光标没有成为手指头的样板。此时,你点击鼠标,你的
click 事件也不会被触发。

而在 <div> 标签里面的 <p>
标签则依然得以捕获所有的鼠标事件。一旦你的鼠标移动到文字上,<div>
本身变得可知并且事件注册也随后生效。

opacity 属性的情趣是设置一个元素的透明度。它不是为改观元素的边界框(bounding
box)而布署的。那象征将 opacity 设为 0 只可以从视觉上隐藏元素。而要素本身仍旧占据它自己的岗位并对网页的布局起功能。它也将响应用户交互。

您有没有想过,为何大家要有那般多技术来隐藏元素,而它们看起来都落到实处的是一律的职能?每一种办法其实与其余办法之间都有一部分微薄的不比,那些不一致决定了在一个一定的场面下使用哪一个主意。那篇教程将覆盖到那一个你须求牢记的分寸差异点,让你按照分歧景况采纳方面那么些方式中符合的方法来隐藏元素。

Display

该属性才是的确意义上的隐藏元素,当元素的display属性为none时,该因素就会就会从视觉中流失,并且连盒模型也不生成.也不会在页面占据任何职务,不但如此,就连它的子元素也会共同从盒子模型中消失。给他和它的子元素添加的其余动画效果互相功用都会不起功用。jq中的show(),hide(),toggle()方法就是由此转移display的值来促成转变效果的。

Display

display 属性根据词义真正隐藏元素。将 display 属性设为 none
确保元素不可知并且连盒模型也不转变。使用那一个特性,被隐形的要素不占用任何空间。不仅如此,一旦
display 设为 none
任何对该因素直接打用户交互操作都无法立见作用。其它,读屏软件也不会读到元素的始末。那种方法发出的意义就好像元素完全不设有。

其余那些元素的子孙元素也会被同时隐藏。为那么些特性添加过渡动画是于事无补的,它的别样例外情状值时期的切换总是会登时生效。

不过请留心,通过 DOM 如故能够访问到那几个元素。由此你可以透过 DOM
来操作它,就好像操作其余的元素。

CSS

.hide { display: none; }

1
2
3
.hide {
   display: none;
}

看上面的例子:

@SitePoint 提供的事例“用 display
隐藏元素”

您将见到第三个块元素内有一个 <p>
元素,它和谐的 display
属性被安装成 block,可是它依旧不可知。那是
visibility:hidden
display:none
的另一个不相同之处。在前一个例证里,将其它子孙元素
visibility 显式设置成
visible
能够让它变得可知,然则 display 不吃这一套,不管我的
display
值是何许,只要祖先元素的 displaynone,它们就都不可知。

如今,将鼠标移到第三个块元素上边几回,然后点击它。这么些操作将让首个块元素显现出来,它其中的数字将是一个过量
0 的数。那是因为,元素就是被如此设置成对用户隐藏,照旧得以经过
JavaScript 来拓展操作。

.hide {

Opacity

opacity特性的情趣是设置一个要素的透明度。它不是为改观元素的边界框(bounding
box)而陈设的。那意味将opacity设为0不得不从视觉上隐藏元素。而要素本身依旧占据它自己的义务并对网页的布局起功效。它也将响应用户交互。

.hide {
  opacity: 0;
}

亚洲必赢官网,假如你打算采用opacity质量在读屏软件中隐藏元素,很消极,你并不可以顺风。元素和它兼具的内容会被读屏软件阅读,似乎网页上的别的因素那样。换句话说,元素的一坐一起就和它们不透明时同样。

我还要提示一句,opacity属性可以用来促成部分效应很棒的卡通片。任何opacity属性值小于1的元素也会创建一个新的堆叠上下文(stacking
context)。

看上边的例证:

看 @SitePoint
提供的事例“用 opacity
隐藏元素”

当你的鼠标移到被隐形的第 2
个的区块上,元素状态平滑地从一点一滴透明过渡到完全不透明。区块也将cursor质量设置为了pointer,这讲明了用户可以与它交互。

Visibility

 该属性类似opacity属性,该属性值为hidden的时候,元素将会暗藏,也会占用着和谐的职位,并对网页的布局起效果,与
opacity
唯一不一样的是它不会响应任何用户交互。其余,元素在读屏软件中也会被隐形。这一个特性也能够落到实处动画效果,只要它的起来和终结状态分裂等。那确保了
visibility 状态切换之间的连结动画可以是光阴平滑的

在意:1.别样的版本的 Internet Explorer
(包含 IE8)都不接济 “inherit” 和 “collapse” 属性值。

   2.一旦一个因素的 visibility 被安装为
hidden,但是想要显示它的子元素,只要给想要展现的子元素添加visibility:visible;就可以了。尝试
hover 在隐藏元素上,不要 hover 在 p
标签里的数字上,你会意识你的鼠标光标没有成为手指头的规范。此时,你点击鼠标,你的
click 事件也不会被触发。而在 <div> 标签里面的 <p>
标签则如故得以捕获所有的鼠标事件。一旦你的鼠标移动到文字上,<div>
本身变得可知并且事件注册也随即生效。

Position

一经有一个因素你想要与它交互,但是你又不想让它影响你的网页布局,没有合适的质量可以处理这种景色(opacity
和 visibility 影响布局, display
不影响布局但又不知所措直接互动——译者注)。在那种境况下,你只可以考虑将元素移出可视区域。这一个点子既不会潜移默化布局,有能让要素保持可以操作。上边是应用那种格局的
CSS:

CSS

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

1
2
3
4
5
.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

下边的例子注明了什么样通过绝对定位的章程隐藏元素,并让它和眼前的很是例子效果同样:

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

那种艺术的显要原理是因此将元素的 top 和 left
设置成丰盛大的负数,使它在屏幕上不可知。选择这么些技能的一个好处(或者地下的弱项)是用它隐藏的因素的内容可以被读屏软件读取。那完全可以明白,是因为您只是将元素移到可视区域外面让用户无法见到它。

您得防止使用那几个方法去潜伏任何可以获得宗旨的要素,因为一旦那么做,当用户让老大元素获得主旨时,会造成一个不足预期的典型切换。这一个主意在开创自定义复选框和单选按钮时平时被接纳。(用
DOM 模拟复选框和单选按钮,但用那么些艺术隐藏真正的 checkbox 和 radio
元向来“接收”大旨切换——译者注)

  opacity: 0;

Visibility

首个要说的属性是visibility。将它的值设为hidden将藏匿大家的元素。就好像opacity属性,被埋伏的要素仍旧会对大家的网页布局起效果。与opacity唯一不一致的是它不会响应任何用户交互。其余,元素在读屏软件中也会被隐形。

其一特性也可以落到实处动画效果,只要它的开端和了结状态分化。这确保了
visibility
状态切换之间的连接动画可以是时间平滑的(事实上可以用那或多或少来用 hidden
落成要素的延期体现和隐形——译者注)。

.hide {
   visibility: hidden;
}

上边的例子演示了visibilityopacity有何的不比:

看 @SitePoint
提供的例子“用 visibility
隐藏元素”

只顾,即使一个要素的visibility被设置为hidden,同时想要呈现它的某部子孙元素,只要将相当元素的visibility显式设置为visible即可(就像例子里面的
.o-hide p——译者注)。尝试只 hover 在隐藏元素上,不要 hover
p标签里的数字上,你会意识你的鼠标光标没有成为手指头的典范。此时,你点击鼠标,你的
click 事件也不会被触发。

而在<div>标签里面的<p>标签则如故得以捕获所有的鼠标事件。一旦你的鼠标移动到文字上,<div>自己变得可知并且事件注册也随即生效。

Clip-path

该属性很少见,该属性是通过裁剪的艺术达成隐藏的。被隐形的内容照旧占据着相当地方,它周围的元素的一举一动就不啻它可知时一致。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不能卓有成效。别的,这几个特性可以运用各类过渡动画来兑现差别的成效。

专注:clip-path之所以没有很普及,是因为其浏览器包容难点。在IE中是截然不辅助的,所以,指出用的时候势需求抬高内核前缀。

 css代码:

.haorooms-small {
    background-size: cover;
    width: 300px;
    height: 300px;
    -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

html代码:

<div class="haorooms-small" style="background-image: url('http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/idtga8h3.png');">

 

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); }

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

下边是一个实际上运用它的例证:

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

如若您把鼠标悬停在率先个要素上,它仍旧可以影响第一个元素,即便第四个元素已经通过
clip-path 隐藏了。若是您点击它,它会移除用来掩藏的
class,让大家的要素从那几个地方显现出来。被隐藏元素中的文字依然能够通过读屏软件读取,许多
WordPress 站点使用 clip-path 或者此前的 clip
来完毕专门为读屏软件提供的文字。

固然大家的元素自身不再显得,它也一如既往占据应有占据的矩形大小,它周围的要素的作为就好似它可知时一致。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不容许奏效。在大家的例子里,剪裁区大小为零,那意味着用户将不可以与隐藏的因素直接互动。其它,这一个特性可以拔取各个过渡动画来贯彻分化的职能。

}

Display

display品质依据词义真正隐藏元素。将display属性设为none担保元素不可知并且连盒模型也不转变。使用那么些特性,被隐形的元素不占用任何空间。不仅如此,一旦display设为none其他对该因素直接打用户交互操作都不容许奏效。其余,读屏软件也不会读到元素的始末。那种方法暴发的功力就像是元素完全不设有。

其他那一个元素的子孙元素也会被同时隐藏。为那些特性添加过渡动画是没用的,它的别样例外景况值时期的切换总是会立马生效。

可是请留心,通过 DOM 如故得以访问到那几个元素。由此你可以通过 DOM
来操作它,如同操作其他的元素。

.hide {
   display: none;
}

看下边的例子:

@SitePoint
提供的事例“用 display
隐藏元素”

您将见到第四个块元素内有一个<p>要素,它和谐的display属性被设置成block,但是它仍旧不可见。那是visibility:hiddendisplay:none的另一个分化之处。在前一个例证里,将其余子孙元素visibility显式设置成visible可以让它变得可知,但是display不吃这一套,不管我的display值是怎么,只要祖先元素的displaynone,它们就都不可知。

前日,将鼠标移到第二个块元素上边一次,然后点击它。那几个操作将让第三个块元素显现出来,它其中的数字将是一个高于
0 的数。那是因为,元素就是被这么设置成对用户隐藏,还是能透过
JavaScript 来展开操作。

Position

该属性的意思就是把元素脱离文档流移出视觉区域,添加该属性后既不会潜移默化布局,又能让要素保持可以操作。应用该属性后,主要就是通过操纵方向(top,left,right,bottom),达到自然的值,离开当前只是页面。

css代码:

 

.hide {

   position: absolute;

   top: -9999px;

   left: -9999px;

}

 

瞩目:你得防止选拔那几个艺术去潜伏任何能够收获主题的要素,因为只要那么做,当用户让老大元素拿到大旨时,会导致一个不得预期的刀口切换。这些法子在创建自定义复选框和单选按钮时平日被运用。

 

结论

在那篇教程里,我们看了 5 种差其他经过 CSS
隐藏元素的艺术。每一种办法都与别的二种有一些区分。知道您想要完毕如何有助于你说了算采取哪一个性质,随着时间推移,你就能按照实际须求本能地挑选最佳艺术了。倘诺您对此隐藏元素的那么些点子还有其余难点,请在评论中留言。

1 赞 5 收藏
评论

亚洲必赢官网 1

即使您打算动用 opacity 属性在读屏软件中隐藏元素,很糟糕,你并无法顺风。元素和它兼具的始末会被读屏软件阅读,就像是网页上的别样因素那样。换句话说,元素的表现就和它们不透明时一样。

Position

一经有一个元素你想要与它交互,然而你又不想让它影响您的网页布局,没有适度的属性可以处理那种情形(opacityvisibility潜移默化布局,
display不影响布局但又力不从心间接互动——译者注)。在那种意况下,你只能够考虑将元素移出可视区域。这么些法子既不会潜移默化布局,有能让要素保持可以操作。上边是利用那种格局的
CSS:

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

上边的事例表明了什么样通过相对定位的办法隐藏元素,并让它和眼前的万分例子效果等同:

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

这种格局的主要原理是透过将元素的topleft设置成丰盛大的负数,使它在显示器上不可知。接纳那几个技能的一个益处(或者地下的瑕疵)是用它隐藏的元素的内容可以被读屏软件读取。那统统可以精晓,是因为你只是将元素移到可视区域外面让用户无法见到它。

您得幸免接纳那么些措施去潜伏任何能够收获主题的因素,因为只要那么做,当用户让那几个元素获得焦点时,会导致一个不可预料的纽带切换。这一个法子在开立自定义复选框和单选按钮时平常被运用。(用
DOM
模拟复选框和单选按钮,但用那个点子隐藏真正的checkboxradio要一贯“接收”宗旨切换——译者注)

结论:

此地介绍了5中方法,每种格局之间都是存在区其他,到底要用哪一类的话,就要视景况而定

自我还要提示一句,opacity 属品质够用来促成部分成效很棒的卡通。任何 opacity 属性值小于 1 的元素也会创制一个新的堆叠上下文(stacking
context)。

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
站点使用clip-path仍然往日的clip来落到实处专门为读屏软件提供的文字。

虽说大家的要素自身不再突显,它也一如既往占据应有占据的矩形大小,它周围的因素的一颦一笑就如同它可知时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不容许奏效。在我们的例子里,剪裁区大小为零,那意味着用户将不可能与隐藏的元素直接互动。别的,那几个特性可以利用种种过渡动画来贯彻分裂的功用。

 

结论

在那篇教程里,我们看了 5 种不一致的经过 CSS
隐藏元素的格局。每一种艺术都与其余二种有一些分别。知道你想要达成怎么样有助于你控制动用哪一个属性,随着时间推移,你就能依照实际需求本能地选取最佳艺术了。即使您对此隐藏元素的那几个主意还有其余难点,请在评价中留言。

看上面的例证:

看 @SitePoint 提供的例子“用 opacity 隐藏元素”

当你的鼠标移到被埋伏的第 2 个的区块上,元素状态平滑地从一点一滴透明过渡到完全不透明。区块也将 cursor 属性设置为了 pointer,那表明了用户可以与它交互。

Visibility

其次个要说的质量是 visibility。将它的值设为 hidden 将躲藏大家的因素。就像是 opacity 属性,被隐形的要素如故会对大家的网页布局起功效。与 opacity 唯一分歧的是它不会响应任何用户交互。别的,元素在读屏软件中也会被隐形。

其一特性也可以完成动画效果,只要它的起首和得了状态分裂。这确保了 visibility 状态切换之间的衔接动画可以是时刻平滑的(事实上可以用那或多或少来用 hidden 完成要素的延期突显和隐形——译者注)。

 

.hide {

   visibility: hidden;

}

下边的事例演示了 visibility 与 opacity 有哪些的例外:

看 @SitePoint 提供的事例“用 visibility 隐藏元素”

在意,如若一个元素的 visibility 被安装为 hidden,同时想要突显它的某部子孙元素,只要将非凡元素的 visibility 显式设置为 visible 即可(就像是例子里面的 .o-hide
p——译者注)。尝试只 hover在隐藏元素上,不要 hover 在 p 标签里的数字上,你会发现你的鼠标光标没有成为手指头的样子。此时,你点击鼠标,你的 click 事件也不会被触发。

而在 <div> 标签里面的 <p> 标签则如故可以捕获所有的鼠标事件。一旦你的鼠标移动到文字上,<div> 本身变得可知并且事件注册也跟着生效。

Display

 

display 属性根据词义真正隐藏元素。将 display 属性设为 none 确保元素不可知并且连盒模型也不扭转。使用那个特性,被埋伏的元素不占用任何空间。不仅如此,一旦 display 设为 none 任何对该因素直接打用户交互操作都不容许奏效。其余,读屏软件也不会读到元素的始末。那种形式暴发的功用如同元素完全不设有。

任何那一个因素的子孙元素也会被同时隐藏。为这几个特性添加过渡动画是没用的,它的其他例外情况值时期的切换总是会立马生效。

而是请留意,通过 DOM 依旧得以访问到这一个元素。因而你可以通过 DOM 来操作它,如同操作其他的因素。

.hide {

   display: none;

}

看上面的例证:

@SitePoint 提供的例子“用 display 隐藏元素”

你将看到第四个块元素内有一个 <p> 元素,它自己的 display 属性被装置成 block,可是它依然不可知。那是 visibility:hidden 和 display:none 的另一个不相同之处。在前一个例证里,将其他子孙元素 visibility 显式设置成 visible 可以让它变得可知,但是 display 不吃这一套,不管我的 display值是怎样,只要祖先元素的 display 是 none,它们就都不可知。

今日,将鼠标移到首个块元素上面几回,然后点击它。那些操作将让第一个块元素显现出来,它里面的数字将是一个超过 0 的数。那是因为,元素就是被这么设置成对用户隐藏,还可以通过JavaScript 来拓展操作。

Position

假定有一个因素你想要与它交互,可是你又不想让它影响你的网页布局,没有适用的属性能够处理那种情状(opacity 和 visibility 影响布局, display 不影响布局但又手足无措直接互动——译者注)。在那种状态下,你只好考虑将元素移出可视区域。那么些措施既不会潜移默化布局,有能让要素保持可以操作。下边是利用那种艺术的 CSS:

.hide {

   position: absolute;

   top: -9999px;

   left: -9999px;

}

下边的例证讲明了怎么着通过相对定位的不二法门隐藏元素,并让它和前边的老大例子效果等同:

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

这种措施的紧要性原理是经过将元素的 top 和 left 设置成丰盛大的负数,使它在显示器上不可知。拔取那一个技能的一个益处(或者地下的瑕疵)是用它隐藏的要素的情节可以被读屏软件读取。那全然能够通晓,是因为你只是将元素移到可视区域外面让用户无法看出它。

你得幸免选择这么些法子去潜伏任何可以拿到主旨的因素,因为只要那么做,当用户让老大元素得到大旨时,会导致一个不得预期的要害切换。这么些措施在成立自定义复选框和单选按钮时平时被应用。

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 站点使用 clip-path 或者从前的clip 来贯彻专门为读屏软件提供的文字。

即使如此我们的要素自身不再显得,它也仍旧占据应有占据的矩形大小,它周围的因素的表现就就好像它可知时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不容许奏效。在大家的事例里,剪裁区大小为零,那意味用户将不可以与隐藏的元素直接互动。其它,这几个特性可以采纳各样过渡动画来落到实处分化的效率。

小说出处和来自网址:

网站地图xml地图