:hover 伪类选择并设置悬停元素的样式。
它由用户覆盖。
当用户将鼠标移到元素上时，元素会悬停。
它不会激活定点设备。
:link、:active 或者 :visited 伪类覆盖了 :hover 伪类定义的样式。
许多触摸设备不支持 :hover ，因为它在匹配方面存在一些问题。
语法
:hover {
css declarations;
}
:hover 伪类示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:hover {
background-color: #8ebf42;
color: #666;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<a href="https://www.onitroad.com/">onitroad.com</a>
</body>
</html>
将鼠标悬停在链接上以查看颜色如何变化。
带有 <a> 标签的 :hover 伪类示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
color: #1c87c9;
}
a:hover {
background-color: #8ebf42;
color: #eee;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<p>生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
</body>
</html>
带有 <div> 标签的 :hover 伪类示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 30px;
background-color: #8ebf42;
color: #eee;
}
div:hover {
background-color: #666;
color: #fff;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<div>
把痛苦停在昨天 把微笑留给明天。
</div>
</body>
</html>
日期：2020-06-02 22:14:35 来源：oir作者：oir