7、网页交互特效：JavaScript 鼠标悬停与事件处理

网页交互特效：JavaScript 鼠标悬停与事件处理

1. 鼠标悬停效果简介

鼠标悬停（Rollovers）效果在网页中十分常见，当鼠标移到某个图像上时，图像会发生变化；鼠标移开后，图像又恢复到原始状态。这种效果能让网页更具交互性。创建一个良好的鼠标悬停效果，通常需要以下几个步骤：
1. 让 JavaScript 检测触发图像交换的鼠标事件。
2. 根据鼠标事件，告知 JavaScript 要交换的图像。
3. 用新图像替换旧图像。

1.1 实际案例

• Tin House 网站 ：该网站首页有一个小房子图标，初始时房子里的灯都是熄灭的。当鼠标悬停在房子的不同部分时，相应区域的灯会亮起。
• JavaScript 书籍首页 ：当鼠标悬停在写着“Turn it over!”的图形上时，书籍的封面图像会切换为背面图像；鼠标移开后，又会切换回封面图像。

由于旧浏览器可能不支持鼠标悬停效果，或者用户可能关闭了 JavaScript，因此在创建这些效果时，还需要进行浏览器检测，以确保不同用户都能有良好的体验。同时，还需要了解 JavaScript 中引号的使用方法，以及网页的文档对象模型（DOM）在 JavaScript 语法中的体现。

2. 事件触发机制

到目前为止，我们看到的 JavaScript 代码大多是在网页加载到浏览器时触发的。但 JavaScript 也可以是事件驱动的，即等待用户执行特定操作（如鼠标悬停在图像上）后才做出反应。编写事件驱动的 JavaScri