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

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

变大
在这里插入图片描述

相关阅读:
Django视图（一）
数字电路与逻辑设计之设计电路之无反变量
最新CLion + STM32 + CubeMX 开发环境搭建
python将pdf转为txt
22.flink参数工具 ParameterTool
使用Python自动化收集和处理视频资源的教程
【Swift-Vapor服务器】0002、Swift-Vapor的基本使用-搭建一个属于自己歌曲的API
http客户端Feign
git常用命令
[网鼎杯 2018]Comment git泄露 / 恢复二次注入 .DS_Store bash_history文件查看

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