【jQuery】如何用jQuery实现鼠标移入后改变背景颜色

最新推荐文章于 2021-06-18 00:27:57 发布

原创最新推荐文章于 2021-06-18 00:27:57 发布 · 4.6k 阅读

8 ·

CC 4.0 BY-SA版权

前端零碎知识专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一段使用jQuery实现鼠标悬停时元素背景颜色切换的代码。当鼠标移入指定class的区域时，会记录原始背景颜色，并将背景颜色更改为预设颜色；当鼠标移出时，背景颜色会恢复到原始状态。

实现效果如图：

jQuery代码实现：

 $(function () {
            var oldColor = "";
            $(".mouse-in-out").mouseover(function () {
                originalColor = $(this).css("background-color");
                $(this).css("background-color","#d9e8fb");
            }).mouseout(function () {
                $(this).css("background-color",originalColor);
            });
        });

注：mouse-in-out 为需要更换背景颜色的区域的class