JavaScript 鼠标移入移出状态（onmouseover、onmouseout）

最新推荐文章于 2025-06-16 23:59:03 发布

LiLi_code

最新推荐文章于 2025-06-16 23:59:03 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript onmouseout onmouseover 鼠标移入移出状态

本文链接：https://blog.youkuaiyun.com/LiLi_code/article/details/86497904

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何使用JavaScript中的onmouseover和onmouseout事件处理鼠标移入和移出div元素的状态。通过实例代码展示，当鼠标进入div元素时触发移入效果，离开时触发移出效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、设计一个div 用于演示：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #myDiv {
            width: 150px;
            height: 50px;
            font-size: 16px;
            text-align: center;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div id="myDiv" onmouseover="changeColor()" onmouseout="removeColor()">
        这是我的盒子！！
    </div>
</body>

2、脚本中具体函数的实现：

<script>
    function changeColor(){
        console.log("移进")
        document.getElementById("myDiv").style.backgroundColor="red"
        document.getElementById("myDiv").style.fontSize = '18px';
        document.getElementById("myDiv").style.color = '#fff'
    }

    function removeColor(){
        console.log("移出")
        document.getElementById("myDiv").style.backgroundColor="#eee"
        document.getElementById("myDiv").style.fontSize = '16px';
        document.getElementById("myDiv").style.color = '#000'
    }
</script>

3、结果演示：

鼠标在div盒子内：移入