在Web開發中,超鏈接是人們在瀏覽網頁時經常使用的一種元素,同時這也是最基礎的元素之一。在常規的網頁中,超鏈接的樣式經常給人一種“點到即走”的感覺,但是如果使用CSS的:visited或:hover偽類可以讓你的頁面有更多的表現力。
當用戶點擊某個鏈接時,會默認顯示出該鏈接已被點擊,此時該鏈接就處于a:visited狀態中。你可以使用CSS控制這個狀態下的鏈接樣式,比如這段代碼就是讓訪問過的鏈接的顏色變為藍色:
a:visited { color: blue; }
在用戶將鼠標懸停在某個鏈接上時,鏈接會變為:hover狀態。同樣,你可以使用CSS控制這個狀態下的鏈接樣式。比如,以下代碼使鏈接在鼠標懸停時的背景顏色變為綠色:
a:hover { background-color: green; }
除此之外,在用戶點擊時,可以使用JavaScript改變鏈接的樣式,比如以下代碼將點擊后的鏈接字體變為加粗:
document.querySelector("a").addEventListener("click", function () { this.style.fontWeight = "bold"; });
通過以上的說明及代碼示例,可以看出通過CSS和JavaScript我們可以輕易地自定義頁面中超鏈接的樣式和狀態,這樣可以讓頁面展示更好的用戶體驗。
上一篇css a點擊出現閃