:hover 选择器 · CSS基础

## :hover 选择器 ### 定义和用法 :hover在鼠标移到链接上时添加的特殊样式。 :hover是一个伪类，它适用于处于悬停状态的元素。最常见的例子是将鼠标指针移动到超链接的边界内。 **例子：** ~~~ a[href]:hover {text-decoration: underline;} p:hover {background: yellow;} ~~~ **提示:** :hover选择器可用于所有元素，不仅是链接。 **提示:** [:link](https://www.w3cschool.cn/cssref/sel-link.html) 选择器设置了未访问过的页面链接样式, [:visited](https://www.w3cschool.cn/cssref/sel-visited.html) 选择器设置访问过的页面链接的样式[:active](https://www.w3cschool.cn/cssref/sel-active.html)选择器设置当你点击链接时的样式。 **注意:** 为了产生预期的效果，在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后！！ ## 实例--选择鼠标移到链接上的样式： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> a:hover { background-color:yellow; } </style> </head> <body> <a href="http://www.w3cschool.cn">w3cschool.cn</a> <a href="http://www.wikipedia.org">wikipedia.org</a> <p><b>注意:</b> 当鼠标移动到链接上 :hover选择器样式链接到该超链接.</p> </body> </html> ```