jquery鼠标悬停切换

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。鼠标悬停切换是指当鼠标悬停在某个元素上时，触发某种效果或行为，当鼠标移开时，恢复到原来的状态。

类型

CSS 切换：通过改变元素的 CSS 样式来实现悬停效果。
内容切换：通过改变元素的内容来实现悬停效果。
动画切换：通过添加动画效果来实现悬停效果。

应用场景

导航菜单：当鼠标悬停在导航菜单项上时，显示下拉菜单。
图片轮播：当鼠标悬停在图片上时，显示下一张图片。
提示信息：当鼠标悬停在某个元素上时，显示提示信息。

示例代码

以下是一个使用 jQuery 实现鼠标悬停切换 CSS 样式的示例：

<!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>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 20px;
        }
        .hovered {
            background-color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="box"></div>

    <script>
        $(document).ready(function() {
            $('.box').hover(
                function() {
                    $(this).addClass('hovered');
                },
                function() {
                    $(this).removeClass('hovered');
                }
            );
        });
    </script>
</body>
</html>

常见问题及解决方法

jQuery 未加载：确保 jQuery 库已正确加载。可以通过检查浏览器的开发者工具（F12）查看控制台是否有错误信息。
选择器错误：确保选择器正确匹配目标元素。可以通过 console.log 输出选择器结果来调试。
事件绑定错误：确保事件绑定在文档加载完成后进行，可以使用 $(document).ready() 或 $(function() {})。

总结

jQuery 鼠标悬停切换通过简化代码和提供丰富的插件支持，使得实现各种悬停效果变得非常容易。通过选择合适的类型和应用场景，可以提升用户体验。遇到问题时，可以通过检查 jQuery 加载情况、选择器匹配和事件绑定来解决问题。

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

有帮助

没帮助

在jQuery中模拟悬停

、、

目前，我有一些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

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回答

使用不显眼的Javascript通过ID操作多个复选框？

、、

我希望能够选择多个复选框onmouseover，但不是将onmouseover应用于每个单独的框，我一直在尝试通过按ID操作复选框来实现这一点，尽管我不确定从使用getElementById到哪里去。因此，您看到的不是下面的内容：<head> var Toggle = true; function handleKeyPress(evt) { if (window.Event) nbr = evt.which; els

浏览 0提问于2010-04-27得票数 0

2回答

鼠标移动时toggleClass闪烁

、、

查看上面的URL，并将鼠标悬停在右上角的向下箭头或搜索图标上。当我将鼠标悬停在这个带有cp-dropdown类的li上时，我想切换showme类，但是，由于某些原因，当你移动鼠标时，这个类似乎在闪烁？有谁有什么想法吗？使用的Jquery： $('.cp-dropdown').mouseenter(function() { $('.site_tint').toggleClass

浏览 0提问于2013-02-11得票数 1

回答已采纳

3回答

除了在我的CSS中使用悬停之外的其他选项

我使用的是ASP.NET 2.0和jQuery..........#ImageBoxNextImage:hoverbackground-image: url(http://www.eRate.co.za/jquery/imagebox/next_image.jpg);background-position: right bottom;只有当我将鼠标悬停在我的项目上时，它才会显示Next_Image.jpg

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

回答已采纳

2回答

在悬停时突出显示一侧边框- JavaScript

我正在尝试提供一个允许用户创建表结构的界面。这类似于Microsoft Word提供的插入表格功能。为此，我使用了JavaScript。当鼠标在边框上移动时，是否可以识别鼠标的位置？

浏览 1提问于2011-03-22得票数 0

2回答

Javascript鼠标悬停带来的麻烦

、、、、

" type="text/javascript" charset="utf-8"></script> <!<h3></h3>

浏览 2提问于2013-05-25得票数 0

回答已采纳

1回答

切换不会保持打开状态

、、

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

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

回答已采纳

1回答

切换点击功能在移动设备上不起作用

、、、、

我真的很努力地在这个右边的工具条上找到一个存档列表来切换- 。1)当鼠标悬停在"SideDish档案“上时，如何让指针/光标出现，以便人们知道这是一个活动链接？jQuery(document).on('click', '.side-archive-list h2', funct

浏览 2提问于2016-05-17得票数 2

6回答

Jquery悬停时显示和隐藏

我想要显示div当鼠标悬停在图像上时我发现了一个我遵循的演示，但它是一个切换悬停我只想在鼠标悬停时显示div一次，当鼠标离开时再次隐藏我不知道我需要在代码中更改什么才能像我想要的那样工作我是新的jquery

浏览 3提问于2012-05-14得票数 0

回答已采纳

2回答

(nav)点击而不是悬停，jquery旧/新版本

、

> <li><a href="#">comments</a></li> </li></nav>我使用jquery我不知道如何让它在jquery版本上工作 http://jsfiddle.net/

浏览 0提问于2016-04-04得票数 0

1回答

多次更改css背景位置

、、

例如:我的拇指是一个140px宽，560px高的图像，当我鼠标悬停时，我想切换背景位置4次(-140px)，并在鼠标悬停时循环该动画。有人能帮我一下吗？我为我糟糕的英语感到抱歉，我是jquery的新手。谢谢!

浏览 3提问于2011-03-14得票数 1

2回答

使用Timer JQuery更改背景颜色CSS

、、、

我希望有人能向我展示有效的JQuery在div类中4种背景颜色之间的动画效果。谢谢

浏览 0提问于2011-08-09得票数 3

回答已采纳

1回答

导航菜单中的Jquery滑动切换问题

我不熟悉jquery，但我的客户要求幻灯片切换在这里，到网站的链接，因为你可以看到菜单是一个普通的wordpress菜单。但一旦你将鼠标悬停在菜单下方，就会出现一个滑动切换，但主页除外，它正在工作。但有时，如果您单击菜单中的另一个标题并将其快速悬停，则幻灯片切换会反转。例如，主页被切换，但所有其他菜单都被禁用。我的jquery代码如下：$('#menu-item-1052,#menu-item-

浏览 2提问于2015-06-30得票数 0

1回答

我的jquery下拉菜单表现得很疯狂

、

大家好，我正在为我的网站建立一个下拉菜单，我想使用jquery它的neally工作方式，我想它的方式，但。我一直在第二个ul上获得快门效果，但在第一个关卡上没有效果。head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="jquery

浏览 0提问于2012-07-11得票数 0

2回答

使用jquery在我的计算机中更改图像

当鼠标悬停在现有图像上时，我需要在代码中获取现有图像，以便与计算机中的另一个图像进行切换；当鼠标不在其上时，需要将旧图像放回原来的图像。这是我到目前为止拥有的jQuery代码： $(this).toggleClass('second-image');我不希望当鼠标悬停在上面时，它们两个都交换图像，我只需要其中一个图像切换到我计算机中的其他图像，而不是让它们交替。

浏览 15提问于2017-02-26得票数 0

点击加载更多