首先我们简单介绍一下隐藏css元素的5种方法，分别为：

 

　　1、使用opacity属性来隐藏元素

 

　　2、使用visibility属性来隐藏元素

 

　　3、使用display属性来隐藏元素

 

　　4、使用position属性来隐藏元素

 

　　5、使用clip-path属性来隐藏元素

 

　　下面我们来详细介绍一下这5种隐藏css元素的方法，让大家了解它们之间的细微差别。

 

　　opacity属性

 

　　opacity属性是通过设置元素的透明度来隐藏元素的。它的设计不会以任何方式改变元素的边界框。这就意味着将不透明度设置为零只会在视觉上隐藏元素；元素仍然占据其位置并影响网页的布局，它还会响应用户交互。

 

　　.hide{

 

　　opacity:0;

 

　　}

 

　　如果你打算使用opacity属性来隐藏屏幕阅读器中的元素，很遗憾，这是不可能的。因为屏幕阅读器将读取元素及其所有内容，就像网页上的所有其他元素一样。

 

　　我还应该提一下，opacity属性被动画化，并用于创建一些出色的效果。例：

 

　　HTML代码：

 

　　<div>1</div>

 

　　<divclass="o-hide">2</div>

 

　　<div>3</div>

 

　　css代码：

 

　　.o-hide{

 

　　opacity:0;

 

　　transition:allease0.8s;

 

　　}

 

　　.o-hide:hover{

 

　　opacity:1;

 

　　}

 

　　效果图：

 

　　1.gif

 

　　当将鼠标悬停在隐藏的第二个块上时，该元素将从完全透明的状态平滑过渡到完全不透明。该模块还设置了cursor：pointer，以显示它可以与之交互。

 

　　visibility属性

 

　　visibility属性是通过设置是否可见，来隐藏元素的。当设置visibility属性的值为hidden将隐藏我们的元素。

 

　　visibility属性就和opacity属性一样，隐藏元素仍会影响我们网页的布局。唯一的区别是，这次当用户隐藏时，它不会捕获任何用户交互。此外，该元素也将对屏幕阅读器隐藏。

 

　　只要初始状态和最终状态具有不同的值，此属性也能够进行动画处理。这确保了可见性状态之间的过渡可以是平滑的而不是突然的。

 

　　这个演示展示了visibility区别于opacity的地方：

 

　　HTML代码：

 

　　<div>1</div>

 

　　<divclass="o-hide"><p>2</p></div>

 

　　<div>3</div>

 

　　css代码：

 

　　.o-hide{

 

　　visibility:hidden;

 

　　transition:allease0.8s;

 

　　}

 

　　.o-hide:hover{

 

　　visibility:visible;

 

　　}

 

　　.o-hidep{

 

　　visibility:visible;

 

　　margin:0;

 

　　padding:0;

 

　　}

 

　　js代码：

 

　　varoHide=document.querySelector(".o-hide");

 

　　varoHideP=document.querySelector(".o-hidep");

 

　　varcount=oHideP.innerHTML;

 

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

 

　　count++;

 

　　oHideP.innerHTML=count;

 

　　});






本文转载自中文网