CSS導航欄是網站設計中非常重要的一個組成部分,通過添加“選中后高亮”效果,可以提高用戶體驗。以下是幾種實現此效果的方法。
/* 第一種方法:使用:hover偽類 */ nav a:hover { background-color: yellow; } /* 第二種方法:使用:focus偽類 */ nav a:focus { background-color: yellow; } /* 第三種方法:使用.active類 */ nav a.active { background-color: yellow; }
第一種方法是使用:hover偽類。這種方法效果比較簡單,只需要在CSS中定制a標簽的鼠標懸停狀態即可。但是該方法存在一定的局限性,因為當用戶使用鍵盤或其他輸入設備瀏覽網頁時,:hover偽類的效果就不再適用了。
第二種方法是使用:focus偽類。這種方法可以解決第一種方法的局限性,因為:focus偽類是針對當前元素獲得焦點時應用的樣式。但是該方法也有一定的局限性,因為:focus偽類只能針對可聚焦的元素(如鏈接、表單控件等)應用。
第三種方法是使用.active類。這種方法需要與JavaScript一起使用,當一個鏈接被點擊時,由JavaScript將.active類添加到該鏈接的class屬性中,然后在CSS中定義.active類的樣式即可。這種方法沒有前兩種方法的局限性,但需要使用JavaScript的幫助。
總之,CSS中有多種方法可以實現“選中后高亮”的效果,具體選擇哪種方法取決于具體的需求和網站的設計。