首頁 > web前端 > css教學 > 主體

css隱藏元素的幾種方法中可以觸發點擊事件的是?

angryTom
發布: 2019-10-24 17:31:34
原創
6445 人瀏覽過

css隱藏元素的幾種方法中可以觸發點擊事件的是?

css隱藏元素的幾種方法中可以觸發點擊事件的是

是opacity設定為0的方法。

css隱藏元素的方式:

1、display:none;

.box{
    display: none;
}
登入後複製

最簡單也最粗暴的方法就是設定元素的display屬性為none。

設定為display:none;的元素將不會再佔用頁面空間,其佔用的空間會被其他元素所佔有,從而會引起瀏覽器的重排和重匯。

2、visibility: hidden

.box{
    visibility: hidden;
}
登入後複製

這種做法雖然能夠隱藏元素,但是該元素仍會佔用頁面空間,因此只會導致瀏覽器的重匯而不會引起重排。

如果希望元素隱藏後不會引起頁面佈局的變化,則建議使用visibility:hidden;方式。

3、opacity:0; (filter: alpha(opacity=0); 考慮相容性兩種都要寫)

設定元素透明度opacity屬性為0,也可以隱藏頁面元素。

.box{
    opacity:0;
}
登入後複製

在呈現上與visibility:hidden;方式一樣,同樣會佔據頁面空間。

事件綁定差異性:

display:none; 的元素會直接從頁面上消失,因此在該元素上綁定的事件不會生效

visibility: hidden; 的元素不會觸發綁定的事件

opacity:0; 的元素會觸發綁定的事件,例如點擊會觸發click函數。

更多HTML/css知識,可以關注PHP中文網 HTML影片教學CSS影片教學

以上是css隱藏元素的幾種方法中可以觸發點擊事件的是?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板