最全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隱藏頁面元素思路不一樣，不一定要隱藏