CSS 可以通过悬停效果为网页增添交互性。下面是一个实现悬停效果的完整示例：
HTML 代码：
<div class="container">
<h2>这是一个悬停效果示例</h2>
<p>当鼠标悬停在这段文字上时，文字的颜色和背景颜色会发生变化。</p>
</div>CSS 代码：
.container {
padding: 20px;
background-color: #f2f2f2;
width: 300px;
margin: 0 auto;
text-align: center;
}
.container:hover {
background-color: #555555;
}
.container:hover h2 {
color: #ffffff;
}
.container:hover p {
color: #ffffff;
}上述示例中，.container 是一个包含标题和文本的容器元素。当鼠标悬停在 .container 上时，CSS 代码会使背景颜色变为深灰色，并且标题和文本的颜色变为白色。
.container:hover 选择器表示鼠标悬停在 .container 元素上时的样式，而 .container:hover h2 和 .container:hover p 则表示在悬停状态下标题和文本的样式。
通过 CSS 实现悬停效果可以增强网页的交互性，使用户更好地与网页进行互动。
正文完