:hover选择器用于在我们将鼠标移动到元素上时选择元素。它不仅限于链接。我们几乎可以在每个HTML
元素上使用它。要设置未访问页面的链接样式，我们可以使用 :link选择器。要为访问过的页面设置链接样式，我们可以使用 : visited选择器，我们可以使用 : active选择器来设置活动链接的样式。
它是在 CSS1 中引入的。在有效的网页设计程序中，悬停可用于根据用户的偏好突出显示网页。
悬停功能包括以下效果：
更改背景和字体的颜色。
修改图像的不透明度。
文本嵌入。
创建图像翻转效果。
图像的交换。
基本上，悬停效果会修改元素的属性值，以启用对指定图像/文本或相应元素的动画更改。在网页中嵌入悬停元素使它们具有交互性和功能性。
通常，悬停功能与所有主要浏览器兼容。但是，在触摸设备上实现它是一项具有挑战性的任务。据观察，主动悬停功能卡在非支持设备上。
:hover {
css declarations;
}让我们通过一些插图来理解它。
示例 1：使用 CSS 更改悬停时的链接颜色
让我们看看当我们将光标放在链接上
时链接的颜色是如何改变的。它将创建一个时尚的效果，当我们使用CSS时，它的实现很容易。
<html>
<head>
<style>
body{
text-align:center;
}
a
{
color: red;
}
a:hover
{
color: green;
}
a:active
{
color: cyan;
}
</style>
</head>
<body>
<h1>将鼠标移到下面的链接上以查看悬停效果。</h1>
<a class = "link" href = https://www.rocschool.com/tutorial/rocschool-show-434.html>;CSS Grid</a>
</body>
</html>示例 2：在段落、标题和链接上应用悬停
<html>
<head>
<style>
body{
text-align:center;
}
p:hover, h1:hover, a:hover{
background-color: yellow;
}
</style>
</head>
<body>
<h1>你好世界</h1>
<p>欢迎来到 RocSchool。</p>
<a href='https://www.rocschool.com/tutorial/rocschool-show-434.html';>CSS Grid</a>
</body>
</html>示例 3 - 图像悬停上的文本叠加
此 CSS 代码在鼠标悬停期间显示图像上的文本。让我们看看鼠标悬停时的图像叠加效果。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
text-align:center;
}
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
max-width: 300px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
width: 100%;
opacity:0;
transition: .9s ease;
font-size: 25px;
padding: 20px;
}
.container:hover .overlay {
opacity: 1.5;
}
</style>
</head>
<body>
<h1>图片叠加标题效果</h1>
<h2>将鼠标移到图像上以查看效果。</h2>
<center>
<div class="container">
<img src="/public/static/images/try/img_london.jpg" class="image">
<div class="overlay">Welcome to RocSchool.com</div>
</div> </center>
</body>
</html>