鼠标移动到按钮上是蓝色，选中是黄色，默认是白色

最新推荐文章于 2025-10-04 11:12:37 发布

原创最新推荐文章于 2025-10-04 11:12:37 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

myWork-- 专栏收录该内容

59 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的按钮交互效果案例，包括鼠标移入、移出及点击时背景颜色和文字颜色的变化。

//鼠标移入按钮
    $('.tab_btn button').mouseover(function () {
        $(this).attr('style', 'background-color:#016cae;color:#fff');
    });
    //鼠标移出按钮
    $('.tab_btn button').mouseout(function () {
        $(this).remove('style', 'background-color:#016cae');
        $(this).attr('style', 'background-color:#fff;color:#005098;');
    });
    $('.tab_btn button').click(function () {
        $(this).attr('style', 'background-color:#FD8B23;color:#fff');
    });

注意：按钮高度最好给px，若自适应的可能高度上会有影响