威尼斯人线上娱乐

【威尼斯人线上娱乐】用css隐藏成分的5种办法,隐藏页面成分的

11 2月 , 2019  

用 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
翻译:十年踪迹
原稿地址:【威尼斯人线上娱乐】用css隐藏成分的5种办法,隐藏页面成分的。http://www.zcfy.cc/article/457

前言

用 CSS 隐藏页面成分有为数不少种格局。你可以将 opacity 设为 0、将 visibility
设为 hidden、将 display 设为 none 或然将 position 设为 absolute
然后将地方设到不可知区域。

然则各类方法以前是存在着微薄的不比,那么些不一样决定了在一个特定的场馆下利用哪一个格局。上边我的这篇小说就给大家表达一(Wissu)下他们之间的区分吧,让我们能根据场所来选用符合的格局.

 

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地图