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

問題描述

//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;,發現是可行的，文字漏出來了，點擊文字鏈接竟然也能觸發，這一點頗為神奇。

問題解答

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

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

：hover不行嗎？

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

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