CSS導(dǎo)航選中后變亮是非常常見的一種交互效果，它可以顯著提升用戶體驗(yàn)并增加網(wǎng)站的可用性。下面就讓我們來學(xué)習(xí)如何實(shí)現(xiàn)一個(gè)簡單的CSS導(dǎo)航選中后變亮效果。

.nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.nav li {
margin-right: 20px;
}
.nav li a {
color: #333;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
}
.nav li a:hover,
.nav li a.active {
background-color: #eee;
}

在這段代碼中，我們設(shè)置了一個(gè)名為“nav”的無序列表，并使用flexbox布局將其水平排列。每個(gè)列表項(xiàng)都有一個(gè)“a”元素作為鏈接，其中，“color”屬性設(shè)置了鏈接文本的顏色，“text-decoration”屬性將下劃線去掉了。我們還為鏈接添加了一些內(nèi)邊距和邊框半徑，以使其看起來更像一個(gè)按鈕。

但是真正有趣的部分是CSS的“:hover”和“.active”偽類選擇器。當(dāng)用戶將鼠標(biāo)懸停在鏈接上時(shí)，“:hover”選擇器將為鏈接添加一個(gè)淺灰色背景色。當(dāng)用戶單擊鏈接時(shí)，我們將添加一個(gè)名為“active”的CSS類，并使用相同的背景色改變已激活鏈接的外觀。

這就是實(shí)現(xiàn)CSS導(dǎo)航選中后變亮的全部內(nèi)容了。簡單而強(qiáng)大的CSS樣式能夠讓網(wǎng)站變得更加優(yōu)美，同時(shí)也能提供更好的用戶體驗(yàn)。