事件绑定(onmouseout,onmouseover)

学习路线：JavaScript基础语法（输出语句）->JavaScript基础语法（变量）->JavaScript基础语法（数据类型）->JavaScript基础语法（运算符）->JavaScript基础语法（流程控制语句）->JavaScript基础语法（类型转换）->JavaScript基础语法（函数）->Array_JavaScript->String_JavaScript->自定义对象_JavaScript->JavaScript_BOM->Window对象->confirm()、setInterval()、setTimeout()->History、Location->闪烁的灯泡->JavaScript_DOM->事件绑定(onclick,onfocus,onblur)->
事件绑定(onmouseout,onmouseover)
->事件绑定(onsubmit)表单提交
->提交表单与验证表单案例

小案例讲解

onmouseout 鼠标移出事件。
onmouseover 鼠标移入事件。

需要完成如下图效果，当鼠标移入到蘑菇图片上时，蘑菇图片变大；当鼠标移出蘑菇图片时，蘑菇图片变小。

mushroom.png
在这里插入图片描述

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #apple{
        width: 200px;
        height: 200px;
    }
</style>
<body>
    <img id="apple" src="https://img-blog.csdnimg.cn/627e3af109db499f924932c49299e046.png" alt="">
    <script>
        var x = document.getElementById("apple")
        x.addEventListener("mouseover", Mouseover, true)
        x.addEventListener("mouseout", Mouseout, true)
        function Mouseover(){
            x.style.width = "500px"
            x.style.height = "500px"
        }
        function Mouseout(){
            x.style.width = "200px"
            x.style.height = "200px"
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

运行结果：
原来
在这里插入图片描述

变大
在这里插入图片描述

相关阅读:
vue导出excel使用xlsx、file-saver、xlsx-style、yxg-xlsx-style 遇到的坑
腾讯mini项目-【指标监控服务重构】2023-08-25
23、分布式锁
Strimzi Kafka Bridge(桥接)实战之二：生产和发送消息
leetcode74搜索二维矩阵
Java类的生命周期和子类实例化对象的过程
dolphinscheduler 3.0.1首页功能介绍及前端项目本地启动配置
Java设计模式之建造者模式
双向认证配置
安卓studio插件开发（一）本地搭建工程

原文地址：https://blog.csdn.net/qq_51447496/article/details/128112439