jQuery网页如何实现鼠标触碰显示效果？-网页设计-锦华智联科技

准备工作：引入 jQuery

在使用任何 jQuery 代码之前，请确保你的 HTML 文件中已经引入了 jQuery 库，最简单的方式是通过 CDN（内容分发网络）引入，把它放在 <head> 标签内。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">jQuery 鼠标悬停效果示例</title>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 你的 HTML 内容将放在这里 -->
</body>
</html>

使用 `hover()` 方法（最常用）

hover() 方法是专门为鼠标悬停事件设计的,它接收两个函数作为参数：

第一个函数：当鼠标指针进入元素时触发（相当于 mouseenter）。
第二个函数：当鼠标指针离开元素时触发（相当于 mouseleave）。

示例1：显示/隐藏一个提示框

这个例子中，当鼠标悬停在一张图片上时，会显示一个描述文字；鼠标移开时,描述文字隐藏。

HTML 结构： 我们用一个容器包裹图片和要显示的提示框。

<div class="hover-container">
    <img src="https://via.placeholder.com/150" alt="示例图片">
    <div class="tooltip">这是一张美丽的风景图片。</div>
</div>

CSS 样式： 为了让效果更明显，我们需要一些 CSS，关键是让 .tooltip 默认隐藏,并且定位在图片旁边。

（图片来源网络，侵删）

<style>
    .hover-container {
        position: relative; /* 为绝对定位的子元素提供参考 */
        display: inline-block;
    }
    .tooltip {
        position: absolute;
        top: -30px; /* 定位在图片上方 */
        left: 50%;
        transform: translateX(-50%); /* 水平居中 */
        background-color: #333;
        color: #fff;
        padding: 5px 10px;
        border-radius: 4px;
        white-space: nowrap; /* 防止文字换行 */
        display: none; /* 默认隐藏 */
        z-index: 10; /* 确保显示在其他内容之上 */
    }
    /* 为提示框加一个小箭头 */
    .tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #333 transparent transparent transparent;
    }
</style>

jQuery 代码： 将下面的代码放在 </body> 标签之前，或者使用 $(document).ready() 函数包裹起来，确保在 DOM 加载完毕后执行。

<script>
$(document).ready(function(){
    // 当鼠标进入 .hover-container 时
    $(".hover-container").hover(
        function() {
            // 鼠标进入：显示 .tooltip
            $(this).find(".tooltip").fadeIn(); // 使用 fadeIn() 实现淡入效果
        },
        function() {
            // 鼠标离开：隐藏 .tooltip
            $(this).find(".tooltip").fadeOut(); // 使用 fadeOut() 实现淡出效果
        }
    );
});
</script>

代码解释：

$(".hover-container"): 选择器，选中 class 为 hover-container 的元素。
.hover(): 绑定鼠标悬停事件。
function() { ... }: 第一个函数,鼠标进入时执行。
$(this).find(".tooltip"): $(this) 指代当前触发事件的 .hover-container 元素。.find(".tooltip") 在其内部查找 class 为 tooltip 的子元素。
.fadeIn() / .fadeOut(): 这是 jQuery 的动画方法，比直接使用 .show() / .hide() 效果更平滑（淡入/淡出）。

使用 `mouseenter()` 和 `mouseleave()`（语义更清晰）

这种方法和 hover() 功能完全一样，只是将两个事件分开写，代码结构更清晰,易于阅读。

<script>
$(document).ready(function(){
    // 鼠标进入事件
    $(".hover-container").mouseenter(function(){
        $(this).find(".tooltip").slideDown(); // 使用 slideDown() 实现向下滑动效果
    });
    // 鼠标离开事件
    $(".hover-container").mouseleave(function(){
        $(this).find(".tooltip").slideUp(); // 使用 slideUp() 实现向上滑动效果
    });
});
</script>

代码解释：

（图片来源网络，侵删）

.mouseenter(): 只有当鼠标进入元素时触发，不会像 mouseover 那样在子元素间移动时也触发。
.mouseleave(): 只有当鼠标离开元素时触发。
.slideDown() / .slideUp(): 另一种常用的动画效果,模拟下拉菜单的展开和收起。

使用 CSS `hover` 伪类（纯 CSS 方案，性能更好）

对于简单的显示/隐藏效果，纯 CSS 是最推荐的方法，它不依赖 JavaScript，性能更好,代码也更简洁。

我们只需要修改 CSS，去掉 jQuery 代码即可。

HTML 和 CSS 保持不变，但需要做一点小调整： 为了让 CSS 动画生效，我们通常使用 opacity 和 visibility 来代替 display: none;。

<style>
    /* ... 其他样式保持不变 ... */
    .tooltip {
        /* ... 其他样式保持不变 ... */
        opacity: 0; /* 初始完全透明 */
        visibility: hidden; /* 初始不可见，但仍然占据空间 */
        transition: opacity 0.3s, visibility 0.3s; /* 添加过渡效果 */
    }
    .hover-container:hover .tooltip {
        opacity: 1; /* 鼠标悬停时完全不透明 */
        visibility: visible; /* 鼠标悬停时可见 */
    }
</style>

优点：

性能：由浏览器直接处理，比通过 JavaScript 操作 DOM 更快、更流畅。
简洁：不需要编写任何 JavaScript 代码。
响应式：即使禁用了 JavaScript,效果依然存在。

缺点：

灵活性差：无法实现复杂的交互逻辑，比如根据不同条件显示不同内容,或者触发其他事件。

总结与如何选择

方法	优点	缺点	适用场景
`hover()`	代码简洁，一行搞定进入和离开事件。	需要引入 jQuery 库。	大多数通用的鼠标悬停效果。
`mouseenter/leave()`	语义清晰，易于理解和维护。	需要写两行代码。	当事件处理逻辑较复杂，需要分开写时。
CSS `hover`	性能最佳，无需 JS，代码最简洁。	灵活性差，无法实现复杂交互。	简单的、纯视觉的悬停效果，如下拉菜单、工具提示等。

给初学者的建议：

如果只是想做一个简单的提示框或下拉菜单，首选 CSS hover 方法。
如果效果需要更复杂的逻辑（比如从服务器加载内容再显示），或者你已经在项目中使用了 jQuery，那么使用 hover() 或 mouseenter/leave() 方法。hover() 更为常用。

jQuery网页如何实现鼠标触碰显示效果？

准备工作：引入 jQuery

使用 hover() 方法（最常用）

示例1：显示/隐藏一个提示框

使用 mouseenter() 和 mouseleave()（语义更清晰）

使用 CSS hover 伪类（纯 CSS 方案，性能更好）

总结与如何选择

使用 `hover()` 方法（最常用）

使用 `mouseenter()` 和 `mouseleave()`（语义更清晰）

使用 CSS `hover` 伪类（纯 CSS 方案，性能更好）