您的位置:首頁/技術文章
文章詳情頁

css3 - css before作為父級元素的背景色遮住了文字怎么辦?

【字号: 作者:豬豬瀏覽:161日期:2023-06-30 16:59:23

問題描述

//less.mk-nav{ li{ position: relative; &:before{ position: absolute; content: ’’; top:0; left:0; background:@mkcolor4;transform:scale(0);} &:hover:before{transform:scale(1);} }}

//html<ul class=’mk-nav’> <li>首頁</li> <li>簡介</li></ul>

li相對定位,before絕對定位,鼠標滑過想讓before作為li的背景色,這樣就不用再加標簽了,但是發現before遮住了li里面的文字

之所以不給li設置background是因為我想通過before的高度做一個交互小動畫

我想到一個方法就是降低透明度,opacity:.15;,發現是可行的,文字漏出來了,點擊文字鏈接竟然也能觸發,這一點頗為神奇。

問題解答

回答1:

遮住的話你用rgba不就透過來了……但還是不明白這個交互是要做什么,li:hover不一樣可以做動畫交互么

回答2:

那你為什么不直接給li設置。。。。background

回答3:

:hover不行嗎?

回答4:

好像絕對定位總是會浮動到元素的最上層的(相對于其他定位方式)。所以用絕對定位的元素做背景怕是不行。題主你可以考慮換換試試,把li設成絕對定位。

回答5:

你也可以這樣:<li>首頁</li>,(給文字一個標簽包裹起來),然后給偽類befor設置z-index:-666(負值),給a標簽設置z-index:10(正值),然后就看到文字在偽類的上面了

標簽: CSS
相關文章:
国产综合久久一区二区三区