在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是最常用的隱藏元素的方法
.hide {
display:none;
}
將元素設置為display:none后,元素在頁面上將徹底消失
元素本身占有的空間就會被其他元素占有,也就是說它會導致瀏覽器的重排和重繪
消失后,自身綁定的事件不會觸發,也不會有過渡效果
特點:元素不可見,不占據空間,無法響應點擊事件
可以將元素的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 通道可以設置為:
transform 屬性可以用于元素的平移、縮放、旋轉或傾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 屬性值來將元素隱藏:
div {
transform: scale(0);
}
div {
translate(-9999px, 0px)
}
transform 屬性提供了出色的性能和硬件加速,因為元素被有效地移動到了單獨的層中,并且可以在 2D 或 3D 中進行動畫處理。原始的布局空間會保持原樣,并不會受影響。使用這種方式隱藏的元素不會觸發任何事件。
可以通過將元素的 z-index 屬性設置為負值,以實現元素的隱藏。這實際上就是將元素放在了我們看不到的層。
div {
z-index: -1;
}
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也是一種常用的隱藏元素的方法
從頁面上僅僅是隱藏該元素,DOM結果均會存在,只是當時在一個不可見的狀態,不會觸發重排,但是會觸發重繪
.hidden{
visibility:hidden
}
給人的效果是隱藏了,所以他自身的事件不會觸發
特點:元素不可見,占據頁面空間,無法響應點擊事件
opacity屬性表示元素的透明度,將元素的透明度設置為0后,在我們用戶眼中,元素也是隱藏的
opacity: N 和 filter: opacity(N) 屬性可以傳遞一個 0 到 1 之間的數字,或者 0% 和 100% 之間的百分比,對應地表示完全透明和完全不透明。
不會引發重排,一般情況下也會引發重繪
如果利用 animation 動畫,對 opacity 做變化(animation會默認觸發GPU加速),則只會觸發 GPU 層面的 composite,不會觸發重繪
.transparent {
opacity:0;
}
由于其仍然是存在于頁面上的,所以他自身的的事件仍然是可以觸發的,但被他遮擋的元素是不能觸發其事件的
需要注意的是:其子元素不能設置opacity來達到顯示的效果
特點:改變元素透明度,元素不可見,占據頁面空間,可以響應點擊事件
在現代瀏覽器中,這兩者之間幾乎沒有實際的區別,但如果同時應用多種效果(模糊、對比度、灰度等)時,應該使用 filter 屬性。
注意:opacity 可以設置動畫并提供出色的性能,但頁面上保留完全透明的元素可能會觸發事件。
將元素的margin,border,padding,height和width等影響元素盒模型的屬性設置成0,如果元素內有子元素或內容,還應該設置其overflow:hidden來隱藏其子元素
.hiddenBox {
margin:0;
border:0;
padding:0;
height:0;
width:0;
overflow:hidden;
}
特點:元素不可見,不占據頁面空間,無法響應點擊事件
將元素移出可視區域
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
特點:元素不可見,不影響頁面布局
通過裁剪的形式
.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 種常見的。
特點是【看不見,占空間,摸得著】
特點是【看不見,占空間,摸不著】
特點是【看不見,不占空間,摸不著】
接下來,我們來編寫代碼驗證一下。首先寫入三個方塊,對中間的橙色方塊添加點擊事件。代碼及頁面效果如下所示:
<!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
image
image
對中間橙色方塊添加 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
image
image
對中間橙色方塊添加 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
image
image
對中間橙色方塊添加 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
image
本人 2021 年度成就總結:
最后,祝大家元旦快樂~
天,我們將學習如何制作一個在懸停時展開和折疊的側邊欄。它看起來很漂亮,實現比看起來簡單得多。我們將逐步完成本教程,并且在此過程中我還將介紹一些值得注意的HTML / CSS技巧。
以下是本文將涉及的提示和技巧列表:
讓我們開始!
可以在此筆中找到此步驟的完整代碼:https://codepen.io/dalisc/pen/rEjRWo
只使用HTML,您的網頁將如下圖所示。一些CSS可以做出什么改變!所以我們需要用一些CSS來設置它,使其看起來像上面的gif。
.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的素材圖標,您會發現一個令人沮喪的問題:默認情況下,圖標和相鄰文字沒有正確垂直對齊。
.material-icons, .icon-text { vertical-align: middle; } .material-icons { padding-bottom: 3px; margin-right: 30px; }
你需要做的是在CSS中垂直對齊它們(vertical-align:middle;)。即使這樣,對齊也有點偏離,所以在此之后給你的圖標一個3px垂直增強(padding-bottom:3px;)。
現在我們將添加一些Javascript,因為我們將在側邊欄中引入一些功能。可以在此筆中找到此步驟的完整代碼
兩個非常有用的事件是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()”>
現在進行懸停并檢查控制臺以查找我們編寫的消息。它應該可以工作了!我們已經設置了告訴側邊欄是折疊還是展開所需的檢測。
可以在此筆中找到此最終部分的完整代碼: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提示和技巧!
將“white-space:nowrap;”添加到側欄CSS。
.sidebar { height: 100%; width: 85px; position: fixed; top: 0; left: 0; background-color: #111; padding-top: 60px; white-space: nowrap; }
即使文本大于側邊欄的寬度,這也會阻止文本換行到下一行。但正如你在下面看到的那樣,雖然它現在在一行中,它會溢出,你可以看到溢出...所以我們需要找到隱藏它的方法!
s
要隱藏溢出的文本,只需將“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
*請認真填寫需求信息,我們會在24小時內與您取得聯系。