jQuery鼠标悬停显示内容|极客教程

jQuery鼠标悬停显示内容

在网页开发中，经常会遇到需要在鼠标悬停在某个元素上时显示特定内容的需求。jQuery是一个广泛使用的JavaScript库，它提供了丰富的API和插件，可以方便地实现这样的功能。本文将详细介绍如何使用jQuery实现鼠标悬停显示内容的效果。

1. 准备工作

在开始之前，确保你的网页已经引入了jQuery库。你可以在头部 <head> 标签中添加以下代码来引入jQuery：

<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

另外，为了方便演示，我们将创建一个简单的HTML结构，其中包含一个触发悬停事件的按钮和一个需要显示的内容。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hover Show Content</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .container {
            position: relative;
            width: 200px;
            height: 50px;
            background-color: lightblue;
            cursor: pointer;
            text-align: center;
            line-height: 50px;
            color: white;
        }

        .popup {
            display: none;
            position: absolute;
            top: 60px;
            left: 0;
            width: 200px;
            background-color: lightgreen;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>

<div class="container">Hover Me!</div>

<div class="popup">Here is some hidden content.</div>

</body>
</html>

在上面的代码中，我们创建了一个包含按钮和隐藏内容的简单页面布局。按钮用于触发悬停事件，隐藏内容则是鼠标悬停时需要显示的内容。隐藏内容使用display: none;样式来默认隐藏，并使用绝对定位放置在按钮下方。

2. jQuery实现鼠标悬停显示内容

下面我们将通过jQuery实现当鼠标悬停在按钮上时显示隐藏内容的效果。我们可以通过hover()方法监听鼠标的悬停事件，并在回调函数中控制隐藏内容的显示和隐藏。

$(document).ready(function () {
    $(".container").hover(function () {
        $(".popup").fadeIn();
    }, function () {
        $(".popup").fadeOut();
    });
});

在上面的代码中，我们首先通过$(document).ready()确保页面DOM结构已经加载完毕，然后使用$(".container").hover()方法监听按钮的鼠标悬停事件。当鼠标进入按钮时，执行function () { $(".popup").fadeIn(); }使隐藏内容渐显出来；当鼠标离开按钮时，执行function () { $(".popup").fadeOut(); }使隐藏内容渐隐起来。