網頁-不靠JS，就純CSS可以完成這樣的要求嗎？！？

css 網頁設計前端前端工程師網頁前端

Oo_花之舞__oO 2023-01-26 20:48:31 ‧ 2505 瀏覽

分享至

寫一個navbar有很多按鈕，我的寫法是放很多li裡面包a文字。
我想要的效果是：
當游標移動到li的話改li的背景顏色、a文字的顏色。

大概長下面那樣的布局:

        <nav class="nav">
            <li><a href="">討論區</a></li>
        </nav>

前者很簡單，用hover就可以了，但我在裡面放color卻沒有效果！！？

li:hover{
    background-color: #2f6f9f;
    transform: scale(1.2);
    transition: all 0.3;
        color: white;    //這句沒辦法改動到文字顏色
}

照理說我的a放在li裡面，直接調整應該可以改動到顏色呀？？

想了許久，難道必須要靠js才能補上這個簡單的小效果嗎？？

以上謝謝前端前輩們。

Oo_花之舞__oO iT邦新手 1 級 ‧ 2023-01-26 20:49:55 檢舉

總結一句話，就是CSS有辦法觸發父曾、改動到子層嗎？該怎麼操作呢～

archer9080 iT邦研究生 3 級 ‧ 2023-01-27 09:08:42 檢舉

可能是瀏覽器默認樣式，也有可能是你引用的樣式當中有指定到a tag
所以你光指定到li不夠，要指定到li裡面的a tag
F12大法要再熟悉熟悉囉

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

re.Zero

iT邦研究生 5 級 ‧ 2023-01-27 02:24:45

最佳解答

一般瀏覽器上，<a> 的 color 有自己的非繼承屬性值。
若想要 <a> 的 color 繼承自「父元素」的屬性值，需要使用 inherit：

<!DOCTYPE html><html><head><style>
nav.nav{ width: 50vw; margin: auto }
li:hover{
	background-color: #2f6f9f;
	transform: scale(1.2);
	transition: all 0.3s;
	color: white;
}
li:hover >a { color: inherit }
</style></head><body>
	<nav class="nav"><ul>
		<li><a href="">討論區</a></li>
	</ul></nav>
</body></html>

但這方式會讓 <a> 的動畫初始顏色變成 <li> 的初始顏色(黑)，動畫過程會有點突兀。

所以用下面的「非 inherit 」方式會好點：

<!DOCTYPE html><html><head><style>
nav.nav{ width: 50vw; margin: auto }
li:hover, li:hover a { 
	transition: all 0.3s;
	color: white;
}
li:hover {
	transform: scale(1.2);
	background-color: #2f6f9f;
}
</style></head><body>
	<nav class="nav"><ul>
		<li><a href="">討論區</a></li>
	</ul></nav>
</body></html>

P.S.: 以上兩個方法不是「觸發父層而改動子層」的概念，而是「修改符合 CSS 選擇器篩選的元素之屬性」的概念。