CSS鼠标hover事件常用于页面元素的交互效果中，比如让鼠标悬停在图片上时图片有颜色变化，或是让鼠标悬停在按钮上时按钮有动态效果等。下面就让我们看一下如何实现这种效果。

/* 首先定义一个样式，这里是当鼠标悬停在元素上的样式 */
:hover {
/* 为了区别其它状态，比如默认、选中状态等，一般会设置特定颜色、背景等 */
background-color: #ff0000;
color: #ffffff;
}
/* 然后在html代码中指定要应用这个样式的元素 */
/* 以文本为例 */
<p>鼠标悬停在这段文本上时，背景色和文字颜色会发生变化</p>
/* 同理，对于图片、按钮等元素也是一样的 */
<img src="example.png" alt="example" width="200" height="200" style="display:block;">
<button>悬停在我上面看看</button>

当我们将以上代码应用到网页中时，就可以看到当鼠标悬停在指定的元素上时，其背景色和文字颜色就会根据预设样式进行变化。