問題描述

//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>首頁(yè)</li> <li>簡(jiǎn)介</li></ul>

li相對(duì)定位，before絕對(duì)定位，鼠標(biāo)滑過想讓before作為li的背景色，這樣就不用再加標(biāo)簽了，但是發(fā)現(xiàn)before遮住了li里面的文字

之所以不給li設(shè)置background是因?yàn)槲蚁胪ㄟ^before的高度做一個(gè)交互小動(dòng)畫

我想到一個(gè)方法就是降低透明度，opacity:.15;,發(fā)現(xiàn)是可行的，文字漏出來(lái)了，點(diǎn)擊文字鏈接竟然也能觸發(fā)，這一點(diǎn)頗為神奇。

問題解答

遮住的話你用rgba不就透過來(lái)了……但還是不明白這個(gè)交互是要做什么，li:hover不一樣可以做動(dòng)畫交互么

那你為什么不直接給li設(shè)置。。。。background

：hover不行嗎？

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

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