jquery 鼠标悬停切换图片

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。鼠标悬停（hover）事件是 jQuery 中的一个常用事件，用于检测鼠标指针是否悬停在某个元素上。

类型

鼠标进入（mouseenter）：当鼠标指针进入元素时触发。
鼠标离开（mouseleave）：当鼠标指针离开元素时触发。

应用场景

鼠标悬停切换图片是一种常见的交互效果，常用于导航菜单、图片展示等场景。

示例代码

以下是一个使用 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 Switch Images</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .image-container {
            position: relative;
            width: 300px;
            height: 200px;
        }
        .image-container img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }
        .image-container img.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="image1.jpg" alt="Image 1" class="active">
        <img src="image2.jpg" alt="Image 2">
    </div>

    <script>
        $(document).ready(function() {
            $('.image-container').hover(
                function() {
                    // 鼠标进入时切换到第二张图片
                    $(this).find('img').removeClass('active');
                    $(this).find('img:last-child').addClass('active');
                },
                function() {
                    // 鼠标离开时切换回第一张图片
                    $(this).find('img').removeClass('active');
                    $(this).find('img:first-child').addClass('active');
                }
            );
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

图片加载顺序问题：如果图片加载顺序不正确，可能会导致初始显示的图片不是预期的图片。可以通过设置 opacity 和 transition 属性来平滑过渡。
图片路径错误：如果图片路径错误，图片将无法显示。确保图片路径正确，并且图片文件存在。
jQuery 未正确加载：如果 jQuery 未正确加载，代码将无法执行。确保 jQuery 库已正确引入，并且路径正确。

通过以上示例代码和解决方法，你可以实现一个简单的鼠标悬停切换图片的效果。

页面内容是否对你有帮助？

有帮助

没帮助

切换不会保持打开状态

、、

我有一些图片(.rv_button)，它们可以作为按钮来切换下面的div (#reveal)。我想将鼠标悬停在按钮上以打开div，但现在我无法让div保持打开状态。有人能帮我一下吗？jQuery(document).ready(function() { jQuery('#reveal').hide(); jQuery('.rv_button').on('mouseenter

浏览 21提问于2020-03-03得票数 1

回答已采纳

2回答

Jquery动画背景图像过渡

、、、

我有一个导航栏，当鼠标悬停在一个项目上时，背景图像会改变，这很好用。但是，我希望这张图片从顶部滑进去，当你停止悬停时再滑回来。我一直在尝试用JQuery实现这一点，使用css bacgroundImage和滑动或切换，但似乎都不起作用。我如何使用Jquery来做这件事？

浏览 1提问于2009-08-07得票数 2

回答已采纳

5回答

创建更快网站的小贴士

、、、、

例如，在我的网站上，我有4组背景图片，当鼠标悬停时它们会切换。有没有专门的jquery插件呢？关于html/css/jquery的一般提示？谢谢。

浏览 2提问于2012-07-31得票数 4

3回答

如何创建悬停弹出窗口

、、、

我想在我的网站上有一个链接，当你点击它时，悬停在内容上方的网站片段出现并显示一些信息，直到它以某种方式关闭，我希望能够插入任何我想在那里-文本，图像，CSS格式等。

浏览 0提问于2009-07-22得票数 0

回答已采纳

3回答

将鼠标悬停在同一元素上时重复更改图像

、

我需要的是每当我将鼠标悬停在菜单项上时，图像都会发生变化。现在总共有5张图片，每次我将鼠标悬停在logo上时，我希望该图片切换到下一张图片，直到它到达终点，然后从1号图片开始循环。现在我可以从图1切换到图2，但之后它就停止了。<li><a href="">menu item</a></li> <li><a href="&q

浏览 1提问于2013-03-01得票数 1

回答已采纳

1回答

如何让picturebox快速流畅地切换图像

、、、

我有一个图片盒，它在我的程序中有一张原始图像。当我将鼠标悬停在它上面时，它会将图片切换到另一张图片，当我离开它时，它又会变回来。但是..。无论我是否将鼠标悬停在上面，都会有这样的延迟才能切换到正确的图片。在它改变之前大约需要1秒，我应该改变什么来提高改变的速度？

浏览 1提问于2014-05-07得票数 0

2回答

如何使用jQuery更改mouseOver上的图片？[JSFiddle]

、、

我想在鼠标悬停时切换图片，并在鼠标离开时恢复。这可以做到吗？

浏览 2提问于2011-01-28得票数 1

3回答

目前，我有一些jQuery/Javascript代码，可以在用户将鼠标悬停在某些元素上时切换css类“ui-state-hovered”，我想用konacha编写一个测试来测试这段代码。在jQuery的帮助下，我如何用Javascript编写这个函数呢？如果用户将鼠标悬停在元素$('.someClass li:first')上，类'ui-state-hovered‘存在，则返回true。否则返回false。我如何模拟用户将鼠标悬停在该元素上？

浏览 117提问于2012-06-15得票数 25

3回答

使用Jquery交换悬停时的返回图像

、、

我有这个HTML代码：这是我的Jquery代码，当我将鼠标悬停在我的img上时，它会切换到另一个img，但我希望将鼠标悬停在外面，然后它切换回原来的img。

浏览 0提问于2012-10-30得票数 1

回答已采纳

1回答

hover(function(){未正确选择

、、

以下是代码 var target =parent().children(".sub-menu > li a"); }); 使用此html，将鼠标悬停在“阶段2”上将揭开资产和财产，将鼠标悬停在阶段1上将隐藏资产和财产，但会显示方法

浏览 2提问于2015-02-19得票数 0

1回答

将图像保存在Fancybox中

、、、

我刚刚切换到使用Fancybox，因为我想通过右键单击“将图像另存为”来下载图片。我见过其他网站也这么做过。但是，在我的网站上，右击“将图像保存为”的选项只出现在图片的中间部分。当鼠标悬停在图像的左上方和右侧时，就没有这样的选项了。为什么会这样呢？当鼠标悬停在图像的任何部分上时，我如何才能显示“将图像保存为”选项？请帮帮忙。

浏览 0提问于2014-10-11得票数 0

回答已采纳

0回答

修复Buggy JQuery动画

、、、、

我一直在尝试使用JQuery创建一个平滑的悬停动画。因此，当你将鼠标悬停在图片上时，图片和文本的大小都会增加。但是，当您将鼠标悬停在图像上时，图像会有一些buggy，并且文本会滚动，正如您在jsfiddle中所看到的那样。有没有什么我可以做的，使它更平滑，而不滚动文本？

浏览 10提问于2016-12-28得票数 0

3回答

jQuery - document.on悬停切换方法-错误

、、

所以，我一直在尝试在jQuery中创建一个函数，当你将鼠标悬停在一个元素上时，它会切换一个img，当你退出该元素时，img会再次切换。redirectSelector.toggle('fast');}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&qu

浏览 55提问于2020-07-04得票数 0

回答已采纳

2回答

jQuery中的下拉菜单和按钮

我有一个下拉菜单的例子。谢谢!

浏览 1提问于2012-01-17得票数 0

回答已采纳

2回答

向此图像替换jQuery片段添加淡入淡出效果

我正在使用这个图像替换jQuery片段，这样当有人将鼠标悬停在缩略图上时，另一个“主”图像就会改变；$('#main-image').attr('src', $(this).attr('src'));当有人将鼠标悬停在.circle img上时，有没有办法让“主”图像相互淡入，而不是只是切换？

浏览 1提问于2013-04-25得票数 0

2回答

在一个div上盘旋会触发另一个div。

、

我将如何在一个图像上盘旋，然后在css中模糊它背后的背景图像？我现在设置的方式是悬停时的背景图像模糊。这是我的css: -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; -webkit-filter: blur(5px);.wrapper{

浏览 2提问于2013-12-27得票数 0

回答已采纳

2回答

如何使用jQuery在悬停时将拇指放大70%

、

我希望jQuery colorbox在鼠标悬停时打开图片，并在鼠标输出时关闭。你能建议我怎么做吗？

浏览 0提问于2010-11-17得票数 2

回答已采纳

1回答

Jquery悬停获取标题属性和显示分区

、

在左侧有一个视图区域div，它将在悬停时显示链接的图片和描述。因此，当你将鼠标悬停在链接上时，它应该会在左侧显示一个特定于该div的div。但是，我想在此基础上添加一点自动化。基本上将鼠标悬停在列表div中的链接上，将切换显示左侧div的显示块。将显示图片和描述的隐藏div id的名称与列表div中链接的title属性相同。因此，在悬停时，该链接将切换id等于title to display: block的div的显示。将鼠标悬停在列

浏览 1提问于2012-05-09得票数 1

回答已采纳

1回答