hover
CSS :hover Pseudo Class
The :hover pseudo-class selects and styles the hovered element. It is covered by the user.
The elements are hovered when the user moves the mouse over the element. It does not activate the pointing device. （当用户将鼠标悬停在元素上时，元素将悬停。它不会激活指针设备。）
The :link, :active, or :visited pseudo-classes override the style defined by the :hover pseudo-class.
Many touch devices do not support :hover because it has some problems with matching.
Version
Version （版本）
Selectors Level 3 （选择器级别3）
Selectors Level 4 （选择器级别4）
Syntax
Syntax （语法）
:hover {
css declarations;
}
Example of the :hover pseudo-class:
<!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.w3cdoc.com/">w3cdoc.com</a>
</body>
</html>
Hover over the links to see how the color changes. （将鼠标悬停在链接上，查看颜色如何变化。）
Example of the :hover pseudo-class with the <a> tag:
<!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>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
</body>
</html>
Example of the :hover pseudo-class with the <div> tag:
<!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>
Lorem ipsum is simply dummy text...
（Lorem ipsum只是一个虚拟文本...）
</div>
</body>
</html>