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不一样可以做动画交互么

这篇关于css3 - css before作为父级元素的背景色遮住了文字怎么办？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！