利用jQuery实现鼠标悬停图片切换及原始SRC的优雅恢复-js教程-PHP中文网

利用jQuery实现鼠标悬停图片切换及原始SRC的优雅恢复

DDD

发布： 2025-09-27 14:04:01

原创

446人浏览过

利用jquery实现鼠标悬停图片切换及原始src的优雅恢复

本文详细探讨了如何在网页中实现鼠标悬停图片切换效果，并在鼠标移出时将图片恢复到其原始状态，而无需硬编码原始图片路径。通过分析常见的DOM元素选择错误，文章提供了使用 document.querySelector() 或 jQuery 选择器正确获取并存储原始图片 src 的解决方案，并给出了完整的代码示例及实用的最佳实践建议，旨在帮助开发者构建更灵活、可维护的动态图片交互。

动态图片切换需求分析

在网页开发中，我们经常需要实现鼠标悬停（mouseover）时图片切换为另一张，并在鼠标移出（mouseout）时恢复到原始图片的交互效果。这种效果可以增强用户体验，例如在产品展示、导航菜单或热点区域提示中。

一个常见的实现方式是利用JavaScript（通常结合jQuery）来监听鼠标事件，并动态修改 <img> 标签的 src 属性。然而，一个挑战是如何在鼠标移出时，不硬编码原始图片的路径，而是能够动态地获取并恢复它。硬编码原始 src 会导致代码难以维护，尤其当页面中存在多个此类图片切换组件时。

考虑以下HTML结构，其中包含一个主图片区域和几个热点链接，每个链接都指向一张新的图片和需要显示/隐藏的文本：

<div class="col-12 text-center">
    <h3>TITLE</h3>
    <div class="name-wrapper">
        <span id="name1" class="some-name opacity-0">Name 1</span>
        <span id="name2" class="some-name opacity-0">Name 2</span>
    </div>
</div>
<div class="col-12">
    <div class="img-set">
        <img src="images/2023/some-img.jpg" alt="Some Image" />
    </div>
    <div class="hotspots">
        <a href="#"  data-target="name1">test1</a>
        <a href="#"  data-target="name2">test2</a>
    </div>
</div>

登录后复制

初始的JavaScript/jQuery实现可能会是这样：

$(".hotspots a").mouseover( function() {
    var value = $(this).attr('data-src'); // 获取新图片路径
    $(".img-set img").attr("src", value); // 切换图片

    var target = $(this).data("target"); // 获取目标文本ID
    $("#" + target).removeClass("opacity-0"); // 显示文本
});

$(".hotspots a").mouseout( function() {
    // 硬编码原始图片路径，这是我们希望改进的地方
    $( '.img-set img' ).attr("src","images/2023/some-img.jpg"); 

    var target = $(this).data("target");
    $("#" + target).addClass("opacity-0"); // 隐藏文本
});

登录后复制

上述代码在 mouseout 事件中硬编码了原始图片的 src ("images/2023/some-img.jpg")。这在单个实例中可能有效，但在多个图片切换场景下，每个 mouseout 事件都需要手动更新，增加了维护成本。

尝试优化：动态获取原始SRC的困境

为了避免硬编码，开发者可能会尝试在页面加载时获取并存储原始图片的 src，然后在 mouseout 事件中使用这个存储的值。一个常见的尝试如下：

$(document).ready(function() {
    // 尝试获取原始SRC，但此处存在问题
    var original = document.getElementsByClassName(".img-set img").getAttribute("src"); 

    $(".hotspots a").mouseover( function() {
        var value = $(this).attr('data-src');
        $(".img-set img").attr("src", value);
        var target = $(this).data("target");
        $("#" + target).removeClass("opacity-0");
    });

    $(".hotspots a").mouseout( function() {
        // 使用存储的原始SRC
        $( '.img-set img' ).attr("src", original); 
        var target = $(this).data("target");
        $("#" + target).addClass("opacity-0");
    });
});

登录后复制

然而，上述代码中的 var original = document.getElementsByClassName(".img-set img").getAttribute("src"); 这一行会导致整个功能失效。原因在于：

document.getElementsByClassName() 方法期望传入一个或多个类名（例如 "img-set"），而不是一个完整的CSS选择器（例如 ".img-set img"）。因此，传入 ".img-set img" 这样的字符串不会找到任何元素。
即使传入正确的类名，getElementsByClassName() 返回的也是一个 HTMLCollection（一个类数组对象），而不是单个DOM元素。要访问集合中的第一个元素，需要使用索引，例如 [0]。
因此，在 HTMLCollection 对象上直接调用 getAttribute("src") 会导致错误，因为 HTMLCollection 没有 getAttribute 方法。

由于 original 变量在初始化时未能正确获取到图片 src，其值会是 undefined 或导致运行时错误，从而使得 mouseout 逻辑无法将图片恢复到正确状态。

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

查看详情

解决方案：正确获取DOM元素并保存原始SRC

要正确获取DOM元素并存储其原始 src，我们可以使用更合适的DOM选择器方法：

使用 document.querySelector() (原生JavaScript):document.querySelector() 方法接受一个CSS选择器字符串作为参数，并返回文档中第一个匹配该选择器的元素。如果未找到匹配项，则返回 null。
```
var original = document.querySelector(".img-set img").getAttribute("src");
```
登录后复制
使用 jQuery 选择器: 如果项目中已经引入了jQuery，可以直接使用其强大的选择器功能。jQuery 选择器会返回一个jQuery对象，可以直接在其上调用 attr() 方法。
```
var original = $(".img-set img").attr("src");
```
登录后复制

这两种方法都能准确地找到目标 <img> 元素并获取其 src 属性值。

完整实现代码示例

结合上述解决方案，我们可以构建一个完整、健壮的动态图片切换及原始 src 恢复的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态图片切换与原始SRC恢复</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .opacity-0 {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .some-name {
            display: inline-block; /* 确保span能正常显示/隐藏 */
            margin: 0 10px;
            font-weight: bold;
        }
        .img-set img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20px auto;
            border: 1px solid #ccc;
        }
        .hotspots a {
            display: inline-block;
            margin: 0 10px;
            padding: 8px 15px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.2s;
        }
        .hotspots a:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

<div class="col-12 text-center">
    <h3>产品详情</h3>
    <div class="name-wrapper">
        <span id="name1" class="some-name opacity-0">产品A</span>
        <span id="name2" class="some-name opacity-0">产品B</span>
    </div>
</div>
<div class="col-12">
    <div class="img-set">
        <img src="https://via.placeholder.com/400x300/FF0000/FFFFFF?text=Original_Image" alt="Original Image" />
    </div>
    <div class="hotspots" style="text-align: center; margin-top: 20px;">
        <a href="#"  data-target="name1">查看产品A</a>
        <a href="#"  data-target="name2">查看产品B</a>
    </div>
</div>

<script>
$(document).ready(function() {
    // 在文档加载完成后，正确获取并存储原始图片SRC
    var originalImgSrc = $(".img-set img").attr("src"); 
    // 或者使用原生JS: var originalImgSrc = document.querySelector(".img-set img").getAttribute("src");

    $(".hotspots a").mouseover( function() {
        var newImgSrc = $(this).attr('data-src'); // 从data-src获取新图片路径
        $(".img-set img").attr("src", newImgSrc); // 切换图片

        var targetId = $(this).data("target"); // 获取目标文本ID
        $("#" + targetId).removeClass("opacity-0"); // 显示对应文本
    });

    $(".hotspots a").mouseout( function() {
        $( '.img-set img' ).attr("src", originalImgSrc); // 恢复到存储的原始图片SRC

        var targetId = $(this).data("target");
        $("#" + targetId).addClass("opacity-0"); // 隐藏对应文本
    });
});
</script>

</body>
</html>

登录后复制

在上述代码中，我们做了以下关键改进：

在 $(document).ready() 回调函数内部，使用 $(".img-set img").attr("src") 正确地获取了主图片的原始 src，并将其存储在 originalImgSrc 变量中。
在 mouseout 事件处理函数中，我们现在使用 originalImgSrc 变量来恢复图片，而不是硬编码的路径。

这样，无论原始图片路径如何变化，代码都能自动适应，大大提高了灵活性和可维护性。

注意事项与最佳实践

性能考量： 在 $(document).ready() 中一次性获取并存储原始 src 是一个良好的实践，避免了在每次 mouseout 事件中重复进行DOM查询，提高了性能。
多图片集处理： 如果页面中有多个独立的图片切换组件，每个组件都有自己的主图片和热点，那么上述方案需要进行调整。可以考虑以下几种方式：
- 遍历初始化： 遍历所有 .img-set 容器，为每个容器单独存储原始 src 并绑定事件。
- 使用 data 属性： 将原始 src 存储在 <img> 标签的 data-original-src 属性中，然后在 mouseout 时直接从 <img> 标签自身获取。
- 事件委托和 closest()/find()： 利用事件委托，并将事件处理函数的上下文 (this) 与 closest() 和 find() 结合，来确定当前操作的图片集。
错误处理： 考虑图片加载失败的情况。可以使用 onerror 事件来处理，例如显示一个占位符图片。
CSS过渡： 可以结合CSS的 transition 属性，使图片的切换和文本的显示/隐藏更加平滑。
语义化HTML： 确保HTML结构语义清晰，alt 属性不为空，有助于SEO和可访问性。

总结

通过本文的讲解，我们了解了在实现动态图片切换效果时，如何优雅地处理鼠标移出恢复原始图片的需求。关键在于正确地在页面加载时获取并存储原始图片的 src 属性，避免了硬编码带来的维护难题。无论是使用原生JavaScript的 document.querySelector() 还是jQuery的选择器，核心都是确保选取的DOM元素是正确的。遵循这些最佳实践，可以构建出更加健壮、灵活且易于维护的网页交互功能。

以上就是利用jQuery实现鼠标悬停图片切换及原始SRC的优雅恢复的详细内容，更多请关注php中文网其它相关文章！