事件绑定(onmouseout,onmouseover)

极客李华

已于 2022-12-12 10:48:24 修改

阅读量790

点赞数 3

分类专栏： JS学习之旅文章标签： css javascript 前端

于 2022-11-30 12:21:26 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/128112439

版权

JS学习之旅专栏收录该内容

55 篇文章 4 订阅

订阅专栏

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