我有這個側邊欄
我希望通過將專案顏色更改為白色并將圖示更改為黑色來激活專案
這是我迄今為止嘗試過的
css代碼
.sidebar li a {
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #76b852;
}
.sidebar li a:hover{
background: #FFF;
}
.sidebar li a.active{
background-color: #FFF;
color: white;
}
html代碼
<li <?php if($currentFile=="dashboard.php"){?>class="active"<?php }?>>
<a href="dashboard.php">
<i class="material-icons">
<span class="material-icons">dashboard</span>
</i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
似乎是這里的問題
.sidebar li a.active{
background-color: #FFF;
color: white;}
當我只添加 l 沒有 a 時，激活的專案顯示如下
我在 Web 開發方面的經驗為 0 希望有人幫助我
uj5u.com熱心網友回復：
使用此代碼：
<li <?php if($currentFile=="dashboard.php"){?>class="active"<?php }?>>
您將active類添加到li元素。
因此，CSS 還必須active在li元素上有類，而不是a鏈接。
.sidebar li.active a {
background-color: #FFF;
color: white;
}
您可能需要添加.sidebar li.active a:hover, .sidebar li.active a:active, 視情況而定。
但首先讓我們將.active選擇器修復在錯誤的位置。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/365244.html