事件绑定(onmouseout,onmouseover)

GeekLiHua

发布于 2025-01-21 15:21:39

7800

代码可运行

文章被收录于专栏：JavaJava

运行总次数：0

代码可运行

事件绑定(onmouseout,onmouseover)

小案例讲解

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://i-blog.csdnimg.cn/blog_migrate/d3b443436af9fd5cae1ba5b684bf209e.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>

运行结果：原来