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;,發現是可行的,文字漏出來了,點擊文字鏈接竟然也能觸發,這一點頗為神奇。
問題解答
回答1:遮住的話你用rgba不就透過來了……但還是不明白這個交互是要做什么,li:hover不一樣可以做動畫交互么
回答2:那你為什么不直接給li設置。。。。background
回答3::hover不行嗎?
回答4:好像絕對定位總是會浮動到元素的最上層的(相對于其他定位方式)。所以用絕對定位的元素做背景怕是不行。題主你可以考慮換換試試,把li設成絕對定位。
回答5:你也可以這樣:<li>首頁</li>,(給文字一個標簽包裹起來),然后給偽類befor設置z-index:-666(負值),給a標簽設置z-index:10(正值),然后就看到文字在偽類的上面了
相關文章:
1. html5 - ElementUI table中el-table-column怎么設置百分比顯示。2. python - 使用readlines()方法讀取文件內容后,再用for循環遍歷文件與變量匹配時出現疑難?3. 對mysql某個字段監控的功能4. css3 - less或者scss 顏色計算的知識應該怎么學?或者在哪里學?5. 注冊賬戶文字不能左右分離6. javascript - table列過多,有什么插件可以提供列排序和選擇顯示列的功能7. css - 網頁div區塊 像蘋果一樣可左右滑動 手機與電腦8. javascript - 數組的過濾和渲染9. html - vue項目中用到了elementUI問題10. JavaScript事件
