jquery鼠标悬停显示

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。鼠标悬停显示是一种常见的交互效果，通常用于提示信息、菜单展开等场景。

类型

鼠标悬停显示文本：当鼠标悬停在某个元素上时，显示一段文本。
鼠标悬停显示菜单：当鼠标悬停在某个元素上时，展开一个菜单或下拉列表。
鼠标悬停显示图片：当鼠标悬停在某个元素上时，显示相关的图片。

应用场景

工具提示：在用户界面上提供额外的信息，帮助用户理解功能或内容。
导航菜单：在用户悬停时展开子菜单，提供更多的导航选项。
图片预览：在用户悬停时显示图片的放大预览。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 实现鼠标悬停显示文本的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Hover Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .tooltip {
            display: none;
            position: absolute;
            background: #333;
            color: #fff;
            padding: 5px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="hoverElement">悬停在这里</div>
    <div class="tooltip" id="tooltip">这是提示信息</div>

    <script>
        $(document).ready(function() {
            $('#hoverElement').hover(
                function() {
                    // 鼠标进入时显示提示信息
                    $('#tooltip').show();
                },
                function() {
                    // 鼠标离开时隐藏提示信息
                    $('#tooltip').hide();
                }
            );
        });
    </script>
</body>
</html>