如何实现鼠标移动按钮上，按钮变颜色的效果

最新推荐文章于 2023-08-26 11:05:53 发布

爱玲姐姐

最新推荐文章于 2023-08-26 11:05:53 发布

阅读量1.2w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： JavaScript 前端开发 CSS 文章标签：按钮变色 js css

本文链接：https://blog.youkuaiyun.com/jal517486222/article/details/82425375

JavaScript 同时被 3 个专栏收录

41 篇文章

订阅专栏

前端开发

36 篇文章

订阅专栏

CSS

8 篇文章

订阅专栏

本文介绍如何使用JavaScript为HTML按钮添加鼠标悬停时的样式变化效果，通过添加和移除CSS类实现视觉反馈。

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

可以通过js来改变鼠标放在按钮上的样式：

这是按钮的默认状态：

<button id='btn' class=" btn btn-block btn-default">提交</button>

js中可以这样写：

<script>
        window.onload = function() {
            var btn = document.getElementById('btn');
            btn.onmouseover = function() {
                $("#btn").addClass('btn-info');
            };
            btn.onmouseout = function() {
                $("#btn").removeClass('btn-info')
            };
        };
    </script>