鼠标悬停时突出显示两个列表中的项目

2024-03-06

我有两个<ul> lists:

Item 1     A5
Item 2     A4
Item 3     A2
Item 4     A1
Item 5     A3

当我将鼠标悬停在任何位置时,我应该从哪里开始编写代码<li>在任一列表中,它将突出显示第一个列表中的项目和第二个列表中相应的 A。

例如,将鼠标悬停在列表 1 中的“项目 3”上应突出显示该项目和列表 2 中的“A3”。

重要的:这些数字没有出现在列表的文本中,这只是为了帮助解释。实际的 HTML 看起来像这样:

<ul class="list1">
    <li id="qq1">dfgfdgfdg</li>
    ....
</ul>

<ul class="list2">
    <li id="aa1">cvbcvbcvb</li>
    ....
</ul>

如果您的 ID 保留该格式,则:

$(".list1 li, .list2 li").hover(function () {
    var n = this.id.substr(2);
    $("#qq" + n + ", #aa" + n).toggleClass("highlight");
});

Demo: http://jsfiddle.net/e37Yg/ http://jsfiddle.net/e37Yg/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

鼠标悬停时突出显示两个列表中的项目 的相关文章

  • 如何使用 JavaScript 压缩文件?

    有没有办法使用 JavaScript 来压缩文件 例如 在雅虎邮件中 当您选择下载电子邮件中的所有附件时 它会被压缩并下载到单个 zip 文件中 JavaScript 能够做到这一点吗 如果是这样 请提供一个编码示例 我发现这个图书馆叫js
  • 需要一个正则表达式将 css 类添加到第一个和最后一个列表项

    更新 谢谢大家的意见 一些附加信息 它实际上只是我正在使用的一小部分标记 20 行 目的是利用正则表达式来完成工作 我还能够修改脚本 电子商务脚本 以在构建导航时插入类 我想限制我所采用的黑客数量 以便在更新到软件的最新版本时让事情变得更容
  • linkedin js 如何是有效的 javascript

    LinkedIn Javascript 集成是通过以下方式完成的 我不明白 这怎么是一个有效的javascript 为什么 api key 没有被引用 脚本标签的主体带有src永远不会被执行 但是 加载的脚本可以像访问任何其他元素的内容一样
  • 当系列没有相同的时间值时,如何在工具提示中显示所有系列

    我有一个显示多个时间序列的图表 不同时间序列不会同时采样 有没有办法在工具提示中显示所有系列 在示例中 您可以看到所有系列都包含在前 2 个点的工具提示中 因为它们是同时采样的 其余点仅包含 1 个系列 var myChart echart
  • 全日历与 UTC 和本地日期的混淆

    我确实让 fullcalendar 正常初始化 所以它代表当前日期 午夜 gt 午夜 1 天 1 小时时段 我从其他一些数据源获取带有时间戳的数据 格式为 YYYY MM DD HH mm 作为字符串传输 无时区信息 因此 我将该字符串转换
  • 如何使用css网格制作一个垄断板?

    I want to create a monopoly board like There are following features in the board 角是方形的 比其他盒子大 每行的文本都面向特定的角度 我的基本 html 结构
  • 为什么 Firefox 3.6 改变了 jQuery 和 CSS 属性?

    为什么 Firefox 3 6 改变了 jQuery 和 CSS 属性 好吧 更具体一点 我有一个交叉淡入淡出插件 可以在放置在彼此之上的两个图像之间创建发光效果 该函数 如下所示 将使顶部图像在悬停时在 200 毫秒内转换为不透明度 0
  • 如何在没有 jQuery 或延迟加载的情况下推迟背景图像

    根据帕特里克 塞克斯顿tutorial https varvy com pagespeed defer images html 我想以与这里相同的方式推迟背景图像img img src data image png base64 R0lGO
  • React setState回调返回值

    我是 React 新手 我希望实现这种流程 set the state execute a function f an async one which returns a promise set the state again return
  • 为什么 WebView 中的 dataWithPDFInsideRect 不能在 Mavericks 上创建高质量的 PDF?

    Run 示例项目 https github com tvarghese TestWebView并观察桌面上生成的输出 PDF 名为保存网页 pdf 粘贴感兴趣的代码片段 NSURL url NSBundle mainBundle URLFo
  • 检查是否安装了 Google Analytics 或 Universal Analytics?

    我正在尝试通过 JavaScript 来确定是否加载了 Google Analytics 或 Universal Analytics 一些客户仍在使用旧的 Google Analytics 我们希望推出一个收集数据的 JavaScript
  • Xpath 获取 if href 包含字符串的一部分

    您好 我尝试获取包含 href p random tagged see 的所有元素 这是我的路线 div preceding h2 text Most recent div div a href p tagged see 我该如何修复此代码
  • 使用 jQuery 获取 JSON Facebook Graph API 用户信息

    我正在尝试使用图形 API 来获取有关用户的一些基本信息 无需用户授权 只需获取公共详细信息 我正在尝试使用 jQuery 和 getJSON 来获取数据并解析它 但我很难弄清楚如何访问我想要的键值对 我想要有类似的东西 var fburl
  • 分配函数后如何删除 onmouseout 事件?

    我有一个问题 我正在为 onmouseout 事件分配一个函数 但运行该事件后 我需要将其删除 将非常感谢您的帮助 这取决于你的代码 如果你用 d3 这样做 那么你可以说 在 onmouseout 事件函数中 element on mous
  • 如何从代码隐藏中向我的 div 添加点击事件?

    如何从代码隐藏中向我的 div 添加点击事件 当我点击 div 时 会出现一个消息框 其中显示 您想删除它吗 并在框中显示 是 或 否 全部来自后面的代码 while reader Read System Web UI HtmlContro
  • 指定 body CSS 宽度安全吗?

    现在通常满足于以一定的尺寸居中 div Blah div 不使用包装器进行对齐和大小并直接将其应用到body tag 像这样 Blah 尺寸是
  • 如何在 getStaticPaths 内添加 params 值数组

    我有一个页面 其结构如下 read slug number 我想要得到slug每个对应的值number in the getStaticPaths这是代码 export async function getStaticPaths const
  • 从 node.js 创建对 AWS ES 实例的有效签名请求

    我试图找到一个示例 说明如何连接到 Node js 中的 AWS ES 实例 然后通过一个简单的请求访问 ES 集群 我正在尝试使用elasticsearch节点包 https www npmjs com package elasticse
  • 数组长度未定义[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我试图按如
  • 如何在 JavaScript 中将日期时间微格式转换为本地时间?

    我有一个页面当前正在使用日期时间微格式 http microformats org wiki datetime design pattern显示时间戳 但我只显示我自己的时区的人类可读时间

随机推荐