<script>

function changeColor() {

document.querySelector('.btn').style.backgroundColor = 'green';

}

</script>

```

在这个例子中，当你将鼠标移动到按钮上时，按钮的背景颜色会从蓝色变为绿色。这是一个非常基础的应用场景，实际开发中可以根据需求实现更复杂的功能。

高级应用

除了简单的样式更改，`onmouseover` 还可以与其他功能结合使用，比如显示提示信息、弹出菜单或是加载动态内容等。例如，你可以为一个图片添加提示文字，当用户悬停在图片上时显示相关信息：

```html

<script>

function showTooltip() {

document.getElementById('tooltip').style.display = 'block';

}

function hideTooltip() {

document.getElementById('tooltip').style.display = 'none';

}

</script>

```

在这个例子中，当鼠标悬停在图片上时，提示框会显示出来；当鼠标移开时，提示框又会消失。

注意事项

1. 兼容性：`onmouseover` 是一种传统的事件处理方式，几乎所有的现代浏览器都支持。

2. 性能优化：虽然 `onmouseover` 很好用，但过度使用可能会导致页面性能下降，特别是在需要频繁触发的情况下。

3. 用户体验：确保悬停效果不会让用户感到困惑或不便，保持设计的简洁和直观。

通过以上介绍，相信你对 `onmouseover` 的基本用法已经有了清晰的认识。合理运用这一事件，可以让你的网页更加生动有趣，提升用户的交互体验。