新手疑問 router-link-active CSS樣式設定

我想在Navbar上面做一個active 灰背景的效果
我的css為
.router-link-active,
.router-link-exact-active{
opacity: 0.3;
border-radius: 3px;
background-color: #ffffff;
}

router-link 大概是長這樣

      <div @click="hideMenu()" >
        <router-link class="nav-item nav-link " to="/admin/overview"><i class="fas fa-chart-pie eiu-nav-icon"></i>
      <span class="eiu-nav"> Overview</span>
        </router-link>
      </div>

=============================
但背景直接把我的文字給覆蓋掉了
請問有人知道該怎麼辦嗎?

我猜测是因为opacity 影响了子元素
去掉 opacity
用 background-color:rgba(0,0,0,0.1);
这样子的。

1 Like

這有用
看起來是opacity的問題沒錯
太感謝你了