您的位置:首页技术文章
文章详情页

css3 - css before作为父级元素的背景色遮住了文字怎么办?

【字号: 日期:2023-06-30 16:59:23浏览:26作者:猪猪

问题描述

//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
相关文章: