最全11种方法 css隐藏页面元素思路不一样，不一定要隐藏

言

在CSS中很多隐藏元素的方法，但这些方法的可访问性、布局、动画、性能和事件处理的方式有所不同。

「动画：」 一些CSS隐藏元素的方法一般是全有或者全无，元素要么是完全可见，要么是完全不可见，并且没有中间状态。其他的，比如透明度，可以是一个范围的值，所以在这中间过程插入动画成为可能；
「可访问性：」 下面的每一种方法都会在视觉上隐藏一个元素，但不一样会真正的去除DOM元素。有一些方式隐藏元素后，屏幕阅读器仍然能读取到元素内容；
「事件处理：」 隐藏元素之后，有些方式元素上的事件仍然能被触发，而有些方式就会导致元素上的事件触发无效；
「表现：」 浏览器加载并解析 HTML DOM 和 CSS 对象模型后，页面将分三个阶段呈现：布局（生成每个元素的几何位置）、绘制（绘制每个元素的像素）、组合（以适当的顺序放置元素层）。仅导致构图变化的效果明显比影响布局的效果更好。在某些情况下，浏览器还可以使用硬件加速。

实现方式

通过css实现隐藏元素方法有如下：

1.display: none: 渲染树不会渲染对象

2.visibility: hidden: 元素在页面中仍占据空间，但是不会响应绑定的监听事件。

3.opacity: 0: 元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。

4.position: absolute: 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

5.z-index: 负值:来使其他元素遮盖住该元素，以此来实现隐藏。

6.clip/clip-path: 元素仍在页面中占据位置，但是不会响应绑定的监听事件。

7.transform: scale(0,0): 将元素缩放为 0，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

8、color alpha 透明度

9、可以通过使用width、height、padding、border-width 或 font-size 来缩小元素的尺寸

10、覆盖另一个元素

11、transform 属性可以用于元素的平移、缩放、旋转或倾斜等。

1. visibility: hidden;   这个属性只是简单的隐藏某个元素, 但是元素占用的空间任然存在 

2. opacity: 0;   一个CSS3属性, 设置 0 可以使一个元素完全透明, 制作出和 visibility 一样的效果 。 与 visibility 相比, 它可以被 transition 和 animate 。

3. position: absolute;    使元素脱离文档流, 处于普通文档之上, 给它设置一个很大的 left 负值定位, 使元素定位在可见区域之外 。

4. display: none;  元素会变得不可见, 并且不会再占用文档的空间 。

5. transform: scale(0);   将一个元素设置为无限小, 这个元素将不可见 。 这个元素原来所在的位置将被保留 。

6. HTML5 hidden attribute; hidden 属性的效果和 display:none; 相同, 这个属性用于记录一个元素的状态 。

7. height: 0; overflow: hidden; 将元素在垂直方向上收缩为0, 使元素消失 。 只要元素没有可见的边框, 该技术就可以正常工作 。

8. filter: blur(0); 将一个元素的模糊度设置为0, 从而使这个元素“消失”在页面中 。

display:none

设置元素的display为none是最常用的隐藏元素的方法

.hide {
    display:none;
}

将元素设置为display:none后，元素在页面上将彻底消失

元素本身占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘

消失后，自身绑定的事件不会触发，也不会有过渡效果

特点：元素不可见，不占据空间，无法响应点击事件

color alpha 透明度

可以将元素的color、background-color 和 border-color 等属性设置为rgba(0,0,0,0)，这样就会使元素完全透明：

div {
 color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}

这三个属性都是支持设置动画效果的，需要注意，透明度不能应用于带有背景图片的元素，除非它们是使用 linear-gradient 或类似方法生成的。

Alpha 通道可以设置为：

transparent：完全透明（中间不能插入动画）；
rgba(r, g, b, a)：红色、绿色、蓝色和 alpha；
hsla(h, s, l, a)：色相、饱和度、亮度和 alpha；
#RRGGBBAA 或 #RGBA。

transform

transform 属性可以用于元素的平移、缩放、旋转或倾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 属性值来将元素隐藏：

div {
 transform: scale(0);
}

div {
 translate(-9999px, 0px)
}

transform 属性提供了出色的性能和硬件加速，因为元素被有效地移动到了单独的层中，并且可以在 2D 或 3D 中进行动画处理。原始的布局空间会保持原样，并不会受影响。使用这种方式隐藏的元素不会触发任何事件。

z-index

可以通过将元素的 z-index 属性设置为负值，以实现元素的隐藏。这实际上就是将元素放在了我们看不到的层。

div {
  z-index: -1;
}

position

position属性允许使用top、bottom、left、right 从页面中的默认位置移动元素。因此，绝对定位的元素可以通过左键：-9999px 等值移出屏幕：

div {
  position: absolute;
  left: -999px;
}

覆盖另一个元素

通过在元素的上面放置与背景颜色相同的元素，可以在视觉上隐藏一个元素。下面来使用::after伪元素来实现：

div::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}

虽然这从技术上讲是可以实现的，但是这样做需要更多的代码。

缩小尺寸

可以通过使用width、height、padding、border-width 或 font-size 来缩小元素的尺寸以实现元素的隐藏。可能还需要应用 overflow: hidden; 来确保内容不会溢出。

div {
  height: 0;
  padding: 0;
  overflow: hidden;
}

使用这种形式我们可以在隐藏过程中使用动画效果，并且他的性能会比 transform 好很多。

visibility:hidden

设置元素的visibility为hidden也是一种常用的隐藏元素的方法

从页面上仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘

.hidden{
    visibility:hidden
}

给人的效果是隐藏了，所以他自身的事件不会触发

特点：元素不可见，占据页面空间，无法响应点击事件

opacity:0

opacity属性表示元素的透明度，将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的

opacity: N 和 filter: opacity(N) 属性可以传递一个 0 到 1 之间的数字，或者 0% 和 100% 之间的百分比，对应地表示完全透明和完全不透明。

opacity: N：该属性用来设置元素的透明度；
filter: opacity(N) ：filter属性用来设置元素的滤镜，opacity是滤镜重的透明度，用来设置元素的透明度。

不会引发重排，一般情况下也会引发重绘

如果利用 animation 动画，对 opacity 做变化（animation会默认触发GPU加速），则只会触发 GPU 层面的 composite，不会触发重绘

.transparent {
    opacity:0;
}

由于其仍然是存在于页面上的，所以他自身的的事件仍然是可以触发的，但被他遮挡的元素是不能触发其事件的

需要注意的是：其子元素不能设置opacity来达到显示的效果

特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件

在现代浏览器中，这两者之间几乎没有实际的区别，但如果同时应用多种效果（模糊、对比度、灰度等）时，应该使用 filter 属性。

注意：opacity 可以设置动画并提供出色的性能，但页面上保留完全透明的元素可能会触发事件。

设置height、width属性为0

将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素

.hiddenBox {
    margin:0;     
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

特点：元素不可见，不占据页面空间，无法响应点击事件

position:absolute

将元素移出可视区域

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

特点：元素不可见，不影响页面布局

clip-path

通过裁剪的形式

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

特点：元素不可见，占据页面空间，无法响应点击事件

小结

最常用的还是display:none和visibility:hidden，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们

区别

关于display: none、visibility: hidden、opacity: 0的区别，如下表所示：

	display: none	visibility: hidden	opacity: 0
页面中	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
被遮挡的元素可触发事件	能	能	不能

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 几种隐藏元素的方法(琐碎知识点整理) </title>
</head>

<style>
.w_vis-hid-outer {
  background-color: steelblue;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 42px;
}
.w_vis-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-con {
  background-color: tomato;
}
.w_r-con {
  background-color: yellowgreen;
}
/* visibility: hidden 设置隐藏 */
.w_now-vis {
  background-color: brown;
  margin: 0 12px;
  /* visibility: hidden; */
}



.w_opac-hid-outer {
  background-color: slategray;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_opac-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-opa-con {
  background-color: snow;
}
.w_r-opa-con {
  background-color: tan;
}
/* opacity: 0  设置隐藏 */
.w_now-opac {
  background-color: skyblue;
  margin: 0 12px;
  /* opacity: 0; */
}



.w_posi-hid-outer {
  background-color: slategray;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_posi-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-pos-con {
  background-color: snow;
  margin-right: 12px;
}
.w_r-pos-con {
  background-color: tan;
  margin-left: 12px;
}
/* opacity: 0  设置隐藏 */
.w_now-posi {
  background-color: skyblue;
  /* position: absolute; */
  /* left: -6666px; */
}



.w_disp-hid-outer {
  background-color: red;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_disp-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-dis-con {
  background-color: #ccc;
  margin-right: 12px;
}
.w_r-dis-con {
  background-color: #212121;
  margin-left: 12px;
  color: #FFF;
}
/* display: none  设置隐藏 */
.w_now-disp {
  background-color: blueviolet;
  /* display: none; */
}


.w_trans-hid-outer {
  background-color: darkorange;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_trans-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-tran-con {
  background-color: #ccc;
  margin-right: 12px;
}
.w_r-tran-con {
  background-color: #212121;
  margin-left: 12px;
  color: #FFF;
}
/* transform: scale(0)  设置隐藏 */
.w_now-trans {
  background-color: blueviolet;
  /* transform: scale(0); */
}


.w_hidd-hid-outer {
  background-color: darksalmon;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_hidd-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-hid-con {
  background-color: steelblue;
  margin-right: 12px;
}
.w_r-hid-con {
  background-color: #212121;
  margin-left: 12px;
  color: #FFF;
}
/* hidden attribute  设置隐藏 (在 html 元素标签上设置) */
.w_now-hidd {
  background-color: red;
}

</style>
<body>
  <div class="w_hide-shel">
    <!-- visibility: hidden  方法 -->
    <div class="w_vis-hid-outer">
      <p class="w_l-con">左侧元素 -- 方法 1: visibility: hidden</p>
      <p class="w_now-vis">中间  隐藏  元素</p>
      <p class="w_r-con">右侧元素  -- 方法 1: visibility: hidden</p>
    </div>

    <!-- opacity: 0  方法-->
    <div class="w_opac-hid-outer">
      <p class="w_l-opa-con">左侧元素 -- 方法 2: opacity: 0</p>
      <p class="w_now-opac">中间  隐藏  元素</p>
      <p class="w_r-opa-con">右侧元素  -- 方法 2: opacity: 0</p>
    </div>

    <!-- position: absolute 方法 -->
    <div class="w_posi-hid-outer">
      <p class="w_l-pos-con">左侧元素 -- 方法 3: position: absolute</p>
      <p class="w_now-posi">中间  隐藏  元素</p>
      <p class="w_r-pos-con">右侧元素  -- 方法 3: position: absolute</p>
    </div>

    <!-- display: none -->
    <div class="w_disp-hid-outer">
      <p class="w_l-dis-con">左侧元素 -- 方法 4: display: none</p>
      <p class="w_now-disp">中间  隐藏  元素</p>
      <p class="w_r-dis-con">右侧元素  -- 方法 4: display: none</p>
    </div>

    <!-- transform: scale(0) -->
    <div class="w_trans-hid-outer">
      <p class="w_l-tran-con">左侧元素 -- 方法 5: display: none</p>
      <p class="w_now-trans">中间  隐藏  元素</p>
      <p class="w_r-tran-con">右侧元素  -- 方法 5: display: none</p>
    </div>

    <!-- hidden attribute -->
    <div class="w_hidd-hid-outer">
      <p class="w_l-hid-con">左侧元素 -- 方法 6: hidden attribute</p>
      <p class="w_now-hidd">中间  隐藏  元素</p>
      <!-- <p class="w_now-hidd" hidden="true">中间  隐藏  元素</p> -->
      <p class="w_r-hid-con">右侧元素  -- 方法 6: hidden attribute</p>
    </div>
  </div>
</body>
</html>

给大家分享我收集整理的各种学习资料，前端小白交学习流程，入门教程等回答-下面是学习资料参考。

前端学习交流、自学、学习资料等推荐 - 知乎

言

2021 年最后一天，疫情还没有完全结束，武汉市政府也取消了跨年活动。今晚，就连地铁都提前到 9 点关闭，大家都在家里跨年。这不，我也在家里跨年。不过我并没有看晚会，而是整理了一篇前端小技巧，算是给自己 2021年一个小小的总结。

正文

用 CSS 隐藏元素有很多种方法，这里介绍 3 种常见的。

opacity: 0

特点是【看不见，占空间，摸得着】

元素隐藏
不改变布局
如果绑定了事件，点击该区域，是可以触发事件的

visibility: hidden

特点是【看不见，占空间，摸不着】

元素隐藏
不改变布局
如果绑定了事件，点击该区域，是无法触发事件的

display: none

特点是【看不见，不占空间，摸不着】

元素隐藏
改变布局
如果绑定了事件，点击该区域，是无法触发事件的

接下来，我们来编写代码验证一下。首先写入三个方块，对中间的橙色方块添加点击事件。代码及页面效果如下所示：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('触发点击操作 0.0');
            }
        </script>
    </body>
</html>

image

opacity: 0

对中间橙色方块添加 opacity: 0 样式，代码及效果如下：

元素隐藏
不改变布局
如果绑定了事件，点击该区域，是可以触发事件的

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .opacity {opacity: 0}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange opacity' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('触发点击操作 0.0');
            }
        </script>
    </body>
</html>

image

visibility: hidden

对中间橙色方块添加 visibility: hidden 样式，代码及效果如下：

元素隐藏
不改变布局
如果绑定了事件，点击该区域，是无法触发事件的

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .visibility {visibility: hidden}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange visibility' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('触发点击操作 0.0');
            }
        </script>
    </body>
</html>

image

display: none

对中间橙色方块添加 display: none 样式，代码及效果如下：

元素隐藏
改变布局
如果绑定了事件，点击该区域，是无法触发事件的

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .display {display: none}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange display' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('触发点击操作 0.0');
            }
        </script>
    </body>
</html>

image

结尾

本人 2021 年度成就总结：

学术方面，凭借个人努力，在核酸检测领域产出多份数据真实详尽的报告。
健康方面，保证膳食纤维摄入，具体表现为每日坚持吃瓜，吃好瓜，吃大瓜。
商业方面，与各大平台合作，全面参与投资 618、双 11、双 12 等千亿级重大项目。
环保方面，股票基金一片绿，绿水青山就是金山银山。在废物利用领域更是成绩斐然：自己作为废物，常常被别人利用。
运动方面，专注于水上项目，在摸鱼、划水等小项上有突出表现。

最后，祝大家元旦快乐～

天，我们将学习如何制作一个在悬停时展开和折叠的侧边栏。它看起来很漂亮，实现比看起来简单得多。我们将逐步完成本教程，并且在此过程中我还将介绍一些值得注意的HTML / CSS技巧。

以下是本文将涉及的提示和技巧列表：

将栏放在侧边栏中
在悬停时更改项目的颜色
您需要了解如何修复的Google材质图标存在问题
onmouseover和onmouseout事件
如何将物品保持在一条线上并防止缠绕
如何隐藏侧边栏中溢出的文本
如何实现平滑过渡

让我们开始！

第1部分：创建一个简单的侧边栏

可以在此笔中找到此步骤的完整代码：https://codepen.io/dalisc/pen/rEjRWo

只使用HTML，您的网页将如下图所示。一些CSS可以做出什么改变！所以我们需要用一些CSS来设置它，使其看起来像上面的gif。

从第1部分学习的CSS技巧和窍门：

将栏放在侧边栏中

.sidebar {
 height: 100%;
 width: 250px;
 position: fixed;
 top: 0;
 left: 0;
 background-color: #111;
 padding-top: 60px;

此代码为侧边栏提供250px（width：250px;）的宽度，背景颜色为深色（background-color：＃111;），并使其在页面上完全垂直延伸（height：100％;）。在code pen以自定义侧边栏。

悬停时更改侧边栏项目的颜色

.sidebar a {
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 25px;
 color: #818181;
 display: block;
}

在这里，我们使用“text-decoration：none;”删除了文本的下划线和蓝色，并在侧边栏项目周围添加了填充和块显示的一些空格。增强用户体验的部分是当项目颜色从灰色变为白色时，这可以通过以下代码完成：

.sidebar a:hover {
 color: #f1f1f1;
}

此代码表示当您将鼠标悬停在类“侧栏”中用<a>标记的元素上时，元素的颜色将更改为您设置的任何颜色，在本例中为＃f1f1f1。

您需要了解如何修复的Google材质图标存在问题

如果您使用Google的素材图标，您会发现一个令人沮丧的问题：默认情况下，图标和相邻文字没有正确垂直对齐。

.material-icons,
.icon-text {
 vertical-align: middle;
}
.material-icons {
 padding-bottom: 3px;
 margin-right: 30px;
}

你需要做的是在CSS中垂直对齐它们（vertical-align：middle;）。即使这样，对齐也有点偏离，所以在此之后给你的图标一个3px垂直增强（padding-bottom：3px;）。

第2部分：检测您的鼠标是否悬停在侧边栏上

现在我们将添加一些Javascript，因为我们将在侧边栏中引入一些功能。可以在此笔中找到此步骤的完整代码

HTML提示：onmouseover和onmouseout

两个非常有用的事件是onmouseover和onmouseout，它们分别检测您的鼠标是否悬停在特定元素之上或之外。对于我们的侧边栏，我们希望检测位于侧边栏的任何部分，因此我们需要将这些事件添加到侧边栏的<div>中，如下所示：

<div id=”mySidebar” class=”sidebar” onmouseover=”somethinghappens” onmouseout=”somethinghappens”>

现在，我们可以决定鼠标悬停在侧边栏上或从边栏悬停的情况。我们需要将“ somethinghappens”替换为我们想要实际发生的事情，但首先，让我们通过向控制台发送消息来检查是否发生了检测。

现在让我们编写两个Javascript函数来确认检测到事件：

function testIn() {
 console.log(“hovering in sidebar”);
}
function testOut() {
 console.log(“hovering outside sidebar”);
}

更新我们的侧边栏：

<div id=”mySidebar” class=”sidebar” onmouseover=”testIn()” onmouseout=”testOut()”>

现在进行悬停并检查控制台以查找我们编写的消息。它应该可以工作了！我们已经设置了告诉侧边栏是折叠还是展开所需的检测。

第3部分：展开/折叠侧边栏

可以在此笔中找到此最终部分的完整代码：https：//codepen.io/dalisc/pen/qzRGxQ

我们将折叠边栏称为迷你侧边栏。我们现在想要根据鼠标是否悬停在我的侧边栏上进行两次查找，因此我们需要在javascript部分中创建一个布尔变量mini。

我们还将创建一个函数来切换侧边栏的扩展。该功能的逻辑如下：如果侧边栏处于迷你模式，将鼠标悬停在侧边栏上会将侧边栏扩展为其完整模式（并将变量mini设置为false）。如果侧边栏处于完全模式，将鼠标悬停在侧边栏上会将其折叠为迷你模式（并将变量mini设置为true）。

因此，我们需要更改onmouseover和onmouseout事件，并相应地引入新函数toggleSidebar（）。

更改html：

<div id=”mySidebar” class=”sidebar” onmouseover=”toggleSidebar()” onmouseout=”toggleSidebar()”>

添加到JS（我们现在可以删除testIn()和testOut()）：

var mini = true;
function toggleSidebar() {
if (mini) {
 console.log(“opening sidebar”);
 document.getElementById(“mySidebar”).style.width = “250px”;
 document.getElementById(“main”).style.marginLeft = “250px”;
 this.mini = false;
} else {
 console.log(“closing sidebar”);
 document.getElementById(“mySidebar”).style.width = “100px”;
 document.getElementById(“main”).style.marginLeft = “100px”;
 this.mini = true;
 }
}

从功能中可以看出，它基本上都是改变侧边栏黑色块的宽度。完整模式的宽度为250px，迷你模式的宽度为85px。我们还策略性地定位文本和图标，以便在侧边栏折叠时完全隐藏文本，仅显示图标。

默认情况下，我们希望侧边栏处于迷你模式，因此我们也将侧边栏的宽度（最初未被遮挡时）更改为85px。

.sidebar {
 height: 100%;
 width: 85px;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 transition: 0.5s;
 padding-top: 60px;
}

当前默认外观：

此时，文本溢出仍有一些问题，所以我将介绍一些CSS提示和技巧！

从第3部分学习的CSS技巧和窍门：

如何在一行中获取图标和文本

将“white-space：nowrap;”添加到侧栏CSS。

.sidebar {
 height: 100%;
 width: 85px;
 position: fixed;
 top: 0;
 left: 0;
 background-color: #111;
 padding-top: 60px;
 white-space: nowrap;
}

即使文本大于侧边栏的宽度，这也会阻止文本换行到下一行。但正如你在下面看到的那样，虽然它现在在一行中，它会溢出，你可以看到溢出...所以我们需要找到隐藏它的方法！

如何隐藏侧边栏中溢出的文本

要隐藏溢出的文本，只需将“overflow-x：hidden;”和“z-index：1;”添加到侧边栏css即可。这将隐藏任何宽于侧边栏宽度的内容。

.sidebar {
 height: 100%;
 width: 85px;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 overflow-x: hidden;
 padding-top: 60px;
 white-space: nowrap;
}

现在我们的侧边栏看起来非常好！（我也改变了主要内容，但主要内容未在本教程中介绍，它包含在code pen。）

如何为扩展创建平滑过渡

现在我们已经遇到了我们需要修复的最后一个小故障，以使侧边栏顺利移动。目前，随着侧边栏折叠和展开，没有动画添加到它，所以它看起来有点不连贯，像这样：

所以我们想要的是一个非常平滑的过渡，如第一页上的gif所示。现在，变化立即发生。为了顺利，我们需要减缓变化。首先，我们需要让侧边栏扩展得更慢，比方说0.5秒。将其添加到侧边栏CSS。

.sidebar {
 height: 100%;
 width: 85px;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 overflow-x: hidden;
 transition: 0.5s;
 padding-top: 60px;
 white-space: nowrap;
}

我们还需要将主要部分同时推到左侧。

#main {
 transition: margin-left .5s;
 padding: 16px;
 margin-left: 85px;
}

你有一个漂亮的侧边栏！

在GitHub存储库中找到完整的工作代码：https：//github.com/dalisc/hover-collapsible-sidebar

转：https://medium.com/@9cv9official/create-a-beautiful-hover-triggered-expandable-sidebar-with-simple-html-css-and-javascript-9f5f80a908d1

在线咨询

上一篇：使用HTML添加表格1（基本元素）-零基础自学网页制作
下一篇：Django 模板系统解析

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

最全11种方法 css隐藏页面元素 思路不一样，不一定要隐藏

言

实现方式

display:none

color alpha 透明度

transform

z-index

position

覆盖另一个元素

缩小尺寸

visibility:hidden

opacity:0

设置height、width属性为0

position:absolute

clip-path

小结

区别

代码实现

言

正文

opacity: 0

visibility: hidden

display: none

opacity: 0

visibility: hidden

display: none

结尾

第1部分：创建一个简单的侧边栏

从第1部分学习的CSS技巧和窍门：

第2部分：检测您的鼠标是否悬停在侧边栏上

第3部分：展开/折叠侧边栏

从第3部分学习的CSS技巧和窍门：

您的项目需求

最全11种方法 css隐藏页面元素思路不一样，不一定要隐藏