事件绑定(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

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

变大
在这里插入图片描述

相关阅读:
如何基于R包做GO分析？实现秒出图
ubunut 远程备份整个系统到其他磁盘中
SQL 教程之为什么 SQL 正在击败 NoSQL，以及这对数据的未来意味着什么
PHP8中的构造方法和析构方法-PHP8知识详解
【kubernetes】带你入门k8s中的HPA
Prometheus+Ansible+Consul实现服务发现
React中的Hooks--useReducer()
uniapp订单循环列表倒计时
mysql数据库备份(mysqldump)
C/C++鸡尾酒疗法 2023年5月电子学会青少年软件编程（C/C++）等级考试一级真题答案解析

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