jquery 鼠标经过特效

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。鼠标经过特效（Mouseover Effect）是指当鼠标指针移动到某个元素上时，该元素会触发某种视觉效果，如改变背景颜色、显示隐藏内容等。

类型

背景颜色变化：当鼠标经过时，改变元素的背景颜色。
显示/隐藏内容：当鼠标经过时，显示或隐藏某些内容。
动画效果：当鼠标经过时，触发元素的动画效果，如淡入淡出、滑动等。

应用场景

导航菜单：在导航菜单中，当鼠标经过某个菜单项时，改变其背景颜色或显示子菜单。
图片轮播：在图片轮播组件中，当鼠标经过某个图片时，显示该图片的详细信息或切换到下一张图片。
按钮特效：在按钮上添加鼠标经过特效，提升用户体验。

示例代码

以下是一个简单的 jQuery 鼠标经过特效示例，当鼠标经过某个元素时，改变其背景颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Mouseover Effect</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <script>
        $(document).ready(function() {
            $('.box').mouseover(function() {
                $(this).css('background-color', 'red');
            }).mouseout(function() {
                $(this).css('background-color', '#ccc');
            });
        });
    </script>
</body>
</html>