隱藏的塊級子元素顯示後讓父元素上移的問題的解決

2021-10-24 10:16:30 字數 887 閱讀 5152

現在在做乙個官網,裡面有一塊內容,裡面的小塊寬高明顯都是固定的,滑鼠懸浮後,文字顏色改變,陰影出現,裡面還有一行文字是懸浮後才可見的,我用的是標籤。

高等院所

匯聚豐富的技術資源

.on-stop-service .serviece-box .service-item 

.service-item .item-title

.service-item .item-des

.serviece-box .service-item:hover

.serviece-box .service-item:hover .item-title

.service-item:hover .item-des

效果是這樣的:

滑鼠懸浮後變成了這樣:

但是我知道怎麼解決,給.service-item加上overflow:hidden;讓這個盒子變成bfc。bfc是乙個結界,會讓裡面的元素不再影響其他元素。而讓元素變成bfc的一些方法不太適用(如讓元素的float不為none,讓元素的position不為relative或static),可以用overflow:hidden;讓元素默默變成bfc,不影響它原本的樣子。

加上overflow:hidden;後,顯示正常了

position屬性在父級元素和子級元素中的影響

父層class zi1 子層1div class zi2 子層2div div body html 兩個父級物件新增position absolute後 將最外層的父級物件去掉後 保留最外層父物件的position absolute,取消第二層的div的絕對定位 設定該屬性後,物件會脫離正常文件流,...

CSS 顯示或隱藏子元素

很多時候我們僅僅只是想讓滑鼠移動入某個元素,然後顯示出某個元素。大多數部落格的標題或內容都是 使用css實現滑鼠懸停在一行上,顯示某些元素 很遺憾,這是錯誤的,滑鼠懸停後,儘管css標準中有定義此種方式以顯示出某些元素,但是 這只能顯示出子元素。例子 html端 div class test spa...

塊級元素以及行內元素居中顯示

title type text css container center style head id container id center div div body html 以上方法是我認為最好用的,不過缺點是需要知道元素的寬度和高度。通過設定需要定位的div元素為position absolu...