實例

規定鏈接的顏色：

a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: #00FF00} /* 已訪問的鏈接 */ a:hover {color: #FF00FF} /* 當有鼠標懸停在鏈接上 */

a:active {color: #0000FF} /* 被選擇的鏈接 */

實例

規定鏈接的顏色：

a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: #00FF00} /* 已訪問的鏈接 */ a:hover {color: #FF00FF} /* 當有鼠標懸停在鏈接上 */

a:active {color: #0000FF} /* 被選擇的鏈接 */

a :link（未被訪問）
a:hover（鼠標懸停）
a:visited（訪問過：真正到達那個頁面）
a:active（鼠標點擊與釋放之間、對無href屬性的a對象無作用）

這幾個元素，定義CSS時候的順序不同，也會直接導致鏈接顯示的效果不同，本人總結了一下，“特殊性”大的后定義就能實現想要的效果

特殊性由一般到特殊排序：link--visited--hover--active

如下就能實現所要的效果：

a:link{color: blue}

a:visited{color: red}

a:hover{color: yellow}

a:active{color: white}

如果定義成這樣：

a:hover{color: yellow}

a:link{color: blue}

a:visited{color: red}

a:active{color: white}

就不能看到hover的效果了，因為:link是最一般的效果，作用范圍大于hover，所以就把前面那句覆蓋了。

實例

規定鏈接的顏色：

a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: #00FF00} /* 已訪問的鏈接 */ a:hover {color: #FF00FF} /* 當有鼠標懸停在鏈接上 */

a:active {color: #0000FF} /* 被選擇的鏈接 */

總結

以上是生活随笔為你收集整理的CSS :hover 伪类的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。