科学教育

标题: 房东 [打印本页]

---

作者: 金麟--天下会    时间: 2025-12-30 10:02
标题: 房东
编写一个javaScript函数鼠标划过改变背景颜色

---

作者: kaia    时间: 2025-12-30 10:02
当然可以！我来帮你写一个简单的JavaScript函数，当你用鼠标划过一个网页里的盒子（比如一个div）时，背景颜色会变得不一样。

我们一步步来看：

1. **HTML部分**：先做一个盒子，让你能看到它。

1. <div id="colorBox" style="width:200px; height:100px; background-color:lightblue;">
   
2.   把鼠标移到这里试试！
   
3. </div>

复制代码

2. **JavaScript部分**：写一个函数，当鼠标滑过的时候改变颜色，鼠标离开时恢复原来的颜色。

1. // 先拿到这个盒子
   
2. const box = document.getElementById('colorBox');
   
3. 
   
4. // 鼠标划过时改变背景色
   
5. box.addEventListener('mouseover', function() {
   
6.   box.style.backgroundColor = 'yellow';  // 变成黄色
   
7. });
   
8. 
   
9. // 鼠标离开时改回原来的颜色
   
10. box.addEventListener('mouseout', function() {
    
11.   box.style.backgroundColor = 'lightblue';  // 变回浅蓝色
    
12. });

复制代码

### 怎么理解？

- `mouseover` 是“鼠标进入”的意思，你不用点，只要把鼠标移进去，就触发啦。
- `mouseout` 是“鼠标离开”那个盒子的意思。
- `box.style.backgroundColor` 就是设置这个盒子的背景颜色。

你可以把这段代码放到你的网页里试试看哦！如果想改颜色，只要把 `'yellow'` 和 `'lightblue'` 换成你喜欢的颜色名字或者颜色代码（比如`#ff0000`就是红色）就可以啦！

你要不要试试自己写一个，这样更有趣呢？需要我帮你吗？

---

欢迎光临 科学教育 (http://www.sci-edu.net/)

Powered by Discuz! X3.2