CSS如何使用:hover选择器（代码示例） _CSS选择器

当鼠标悬停在元素上时, 该选择器用于设置元素的样式。它可以在每个元素上使用。
语法如下：

element :hover{CSS declarations; }

示例1：在将鼠标悬停在元素上时更改背景颜色。

< !DOCTYPE html> < html > < head > < style > h1:hover { color: white; background-color: green; } < / style > < / head > < body > < h1 align = "center" > hover it< / h1 > < / body > < / html >

输出如下：
初始：

文章图片
悬停时：

文章图片
示例2：在将鼠标悬停在文本上方时显示隐藏的块。

< !DOCTYPE html> < html > < head > < style > ul { display: none; }div { background: green; width: 200px; height: 200px; padding: 20px; padding-left: 50px; font-size: 30px; color: white; display: none; }h3:hover + div { display: block; } < / style > < / head > < body > < h3 align = "center" > Hover to see hidden lsbin. < / h3 > < div > lsbin < / div > < / body > < / html >

输出如下：
初始：

文章图片
悬停时：

文章图片
示例3：在将鼠标悬停在元素上时更改字体颜色。

< !DOCTYPE html> < html > < head > < style > h1:hover { color: red; } < / style > < / head > < body > < h1 align = "center" > hover it< / h1 > < / body > < / html >

输出如下：
初始：

文章图片
悬停时：

文章图片
范例4：悬停在其上方时更改文本的字体系列。

< !DOCTYPE html> < html > < head > < style > h1:hover { font-family: monospace; } < / style > < / head > < body > < h1 align = "center" > hover it< / h1 > < / body > < / html >

输出如下：
初始：

文章图片
悬停时：

文章图片
示例5：将文本装饰更改为将鼠标悬停在元素上时下划线。

< !DOCTYPE html> < html > < head > < style > h1:hover { text-decoration: underline; } < / style > < / head > < body > < h1 align = "center" > hover it< / h1 > < / body > < / html >

输出如下：
初始：