jQuery -通过`for`循环悬停时显示文本

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。for 循环是 JavaScript 中的一种基本循环结构，用于重复执行一段代码多次。

类型

这种技术属于前端开发中的事件处理和 DOM 操作。

应用场景

适用于需要在用户与网页元素交互时提供即时反馈的场景，例如悬停在一个按钮上时显示提示信息，或者在悬停在一个列表项上时显示详细信息。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 和 for 循环来实现悬停时显示文本的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Hover Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .hover-text {
    display: none;
  }
</style>
<script>
$(document).ready(function() {
  // 假设有多个元素需要绑定悬停事件
  var elements = ['.item1', '.item2', '.item3'];

  // 使用 for 循环绑定悬停事件
  for (var i = 0; i < elements.length; i++) {
    $(elements[i]).hover(
      function() {
        // 鼠标进入时显示文本
        $(this).find('.hover-text').show();
      },
      function() {
        // 鼠标离开时隐藏文本
        $(this).find('.hover-text').hide();
      }
    );
  }
});
</script>
</head>
<body>

<div class="item1">
  Hover over me
  <span class="hover-text">This is item 1</span>
</div>

<div class="item2">
  Hover over me
  <span class="hover-text">This is item 2</span>
</div>

<div class="item3">
  Hover over me
  <span class="hover-text">This is item 3</span>
</div>

</body>
</html>

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

问题： 悬停事件没有按预期触发。

原因：

jQuery 库没有正确加载。
选择器没有正确匹配到目标元素。
悬停事件的绑定代码在 DOM 元素加载完成之前执行。

解决方法：

确保 jQuery 库的链接是正确的，并且网络连接没有问题。
检查选择器是否正确，可以通过浏览器的开发者工具来验证。
使用 $(document).ready() 或 $(function() { ... }) 确保悬停事件的绑定代码在 DOM 加载完成后执行。

参考链接

jQuery 官方网站：https://jquery.com/
jQuery 文档：https://api.jquery.com/

通过上述方法，你可以实现一个简单的悬停显示文本的功能，并且可以根据实际需求进行扩展和调整。

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

有帮助

没帮助

jQuery -通过`for`循环悬停时显示文本

、、、

我正在制作一个网页，我正在添加一个功能；当你将鼠标悬停在某个div上时，另一个div会显示某个文本。有5个元素我希望能够悬停和显示文本。我添加了这个功能，但它不能正常工作-只有最后一个悬停的div显示了文本。我隔离了使用的元素，并将它们移动到沙箱中进行调整。无论我做什么(我是通过使用一堆if语句让它工作的，但我正在尝试删除它，使它看起来更整洁)，只有最后一个div会显示文本

浏览 17提问于2020-11-09得票数 0

回答已采纳

1回答

jQuery如何迭代自动完成和设置标题并在悬停时显示

、

如何循环通过jquery自动完成插件创建的动态列表.我需要循环遍历列表中的每个元素，并设置menu...the标题中列出的每个值的标题应该与产品名称相同.之所以这样做，是因为列表中的某些文本被隐藏在我怎么能这么做..。我试过的密码，

浏览 0提问于2013-01-08得票数 0

回答已采纳

2回答

JQUERY -如何将两个元素- IMG - DIV悬停在IMG上时显示/隐藏DIV -添加了悬停隐藏/显示在img上

、、、、

我对jquery这个奇迹非常陌生。 <script type="text/javascript"> 我创建了这些在for each中循环的here元素。<img class="ExcommKnap" src="{$media/da

浏览 0提问于2010-06-18得票数 0

回答已采纳

1回答

jQuery rating -如何在悬停时显示选定的值？

、、

我使用的是jquery.rating.js插件，我写了一个小函数来显示点击输入的值，但我也想在悬停时显示该值。class="star required" value="5" name="rating" />第一个问题: on hover没有显示值第二个问题:如果我不小心将光标指向输入，则会

浏览 2提问于2012-02-27得票数 1

回答已采纳

2回答

我正在学习JQuery，并试图通过图像创建循环文本，但我在使用button div (容器主目录)时遇到了问题。这里有一个例子：，其中最后三个图像是按钮，不应该对上面的图片(前三个)有任何影响。如果你将鼠标悬停在图像(前三张)上，它可以很好地工作，但如果将鼠标悬停在按钮(最后三张图像)上，脚本就会损坏并停止工作。您可以帮助我修复脚本，以便如果悬停在按钮上(最后三个图像)，那么就没有循环文本的影响。谢谢。

浏览 0提问于2012-06-25得票数 3

回答已采纳

1回答

禁用在Safari中悬停时显示全文

、、、、

当我们将鼠标悬停在文本上时，它会通过JQuery工具提示显示全文。 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src$t.removeAttr(&

浏览 0提问于2017-05-18得票数 0

1回答

创建一个搜索动画，将文本输入部分从右向左滑动。

、、

当我在it.First中悬停时，我想在搜索循环图标上创建一个动画，该循环只显示如下所示当我将悬停在循环图标上时，文本输入必须从右边出现，将其宽度增加到左边，并获得100%的宽度。我试过这段代码 jQuery(".main_searc

浏览 3提问于2015-03-06得票数 1

回答已采纳

2回答

如何将此菜单转换为MultiLevel菜单？

、、、、

我刚刚发现了这个很酷的水平下拉菜单：有没有人能对我如何制作多级菜单有什么建议？

浏览 2提问于2011-01-25得票数 0

回答已采纳

2回答

如何在jQuery* SmartMenus中单击顶级链接时打开子菜单*

、、

我正在为一个网站使用jquery智能菜单，当用户悬停父项目时，插件默认显示子菜单，但是，我的父项目没有内容，单击它们应该会以与我悬停时相同的方式打开子菜单。

浏览 1提问于2014-02-06得票数 1

2回答

如何在另一个元素上触发鼠标对一个元素的鼠标覆盖？

、、

我无法看到URL预览在左下角，就像我可以看到如果我悬停在锚元素。我怎么能在锚上正确地触发鼠标？ $("#anchorelem").mouseover();});<button cla

浏览 2提问于2021-09-15得票数 1

回答已采纳

1回答

彩虹色文本的循环动画

、、、

循环颜色在JavaScript/jQuery上的悬停我已经讨论过让所有这一切发生一次的逻辑，但是不能让悬停循环行为起作用。这里是指向codepen.io: 的链接我尝试过使用JavaScript鼠标事件和jQuery</e

浏览 4提问于2013-10-03得票数 11

回答已采纳

2回答

播放视频并显示悬停在图像上的文本

、、、、

我正在寻找一种方法来实现悬停在一个图像上，触发播放视频。当鼠标不再停留在图像上时，图像(poster?)应该再次显示。视频上也应该有文字显示。请看下面来自Loop的例子。他们在他们的案例中有这种悬停效应。我用imageoverlay或poster image尝试了多种解决方案，但它们都不能让我顺利地从图像过渡到视频。请参阅下面的代码。我不知道如何在图像/视频的顶部添加文本，在悬停时获得这种“探索”文本，就像Loop：中的示例

浏览 0提问于2019-04-02得票数 0

1回答

在中使用jQuery在打开和不打开时

、

当用户希望从选择标签中的数据项中选择时，他单击选择html组件。选择html组件并显示读取行，使其包含来自两个数组的数据:数字标识符，类似于‘-’的短分配器，然后描述该数字标识符，即文本。( f)当用户从select标签中选择'12321213‘并打开时，它应该显示整个行类似于选择阶段，比如'12321213’--这是描述。第二个数组是一个存储，用于在需要显示字段时恢复和包含这两个字段(数字和描述)。正如我提到的，在打开选项窗口时</e

浏览 1提问于2014-09-22得票数 0

1回答

需要帮助使元素或pro中的文本效果悬停。

、、、、

我想要实现完全像这样的网站：就像我们会有3个文本/按钮通过悬停会改变背景图像，但只能通过悬停，但文本不应该停留在文本上，同时当我们释放悬停时，主滑块图像应该会出现。我已经实现了悬停，但问题是我不能保持文本通过悬停，而且当图像被改变后，它不会重置后，悬停到我需要的主要图像。从某个地方获得代码的帮助，并在elementor pro中使用：

浏览 3提问于2022-09-01得票数 0

回答已采纳

1回答

动态内容引导弹出窗口

、、

我在弹出窗口上显示div。这是我的。现在如何替换title和contents？谢谢编辑:我也不能点击Show details按钮。

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

回答已采纳

4回答

如何将文本悬停在div img上？

、、

我正在尝试弄清楚如何在img之上的div中显示文本？我不想使用背景图像，因为我的div的名称是相同的，并且最终会被循环，所以我想让它保持打开状态，以便回显数据库中的文本。那么，有没有办法用每个.box的文本创建一个独特的悬停呢？.box被重复了无数次。我可以通过CSS或jQuery来做吗？谢谢，凯蒂

浏览 2提问于2011-08-16得票数 2

回答已采纳

2回答

在同一元素上使用jQuery和CSS悬停状态

、、

我在分配给列表项的同一个类中混合使用jQuery和CSS悬停状态。 <div class="list">

浏览 2提问于2017-05-16得票数 1

回答已采纳

3回答

识别网页中的内部标记

、

我想建立一个网站，在那里我应该能够通过悬停它来识别组件。例如，如果我们将鼠标悬停在图像上，它应该在工具提示中被标识为图像。如果我们将鼠标悬停在包含图像和文本的div上，则应将其标识为图像文本组件等。

浏览 0提问于2018-06-14得票数 0

1回答

如果下一个悬停id不等于“”X“”，则删除jQuery* mouseleave*

、、、

我正在尝试检测在图标悬停后的下一个悬停是什么。当图标(class="infoToolTip")悬停时，会显示一个文本框，是用户离开图标并转到文本框(id="tooltip")时，我需要保持显示文本框。如果悬停的项既不是'tooltip‘也不是'infoToolTip’，那么我需要删除'tooltip‘的任何实例。下面是我到目前为止

浏览 0提问于2013-07-17得票数 2

2回答

停止jQuery淡入循环并添加Hover不工作

、、、、

我试图在jQuery中实现淡入淡出循环。如果我在<div class="po

浏览 2提问于2014-07-23得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

jQuery -通过`for`循环悬停时显示文本

基础概念

相关优势

类型

应用场景

示例代码

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

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐