Javascript jQuery:mouseover使id中最后4个数字与触发器相同的图像可见

我目前正在一个网站上工作，遇到以下问题：

在网站上，我有一些小圆点（图像），ID为“dot0001”、“dot0002”、“dot0003”等。我还有ID为“info0001”、“info00002”、“info0003”等的隐藏图像（可见性：隐藏）

我正在寻找jQuery解决方案。我需要的是一个允许以下事件的代码：

当用户将鼠标移到“dot0001”上时，图像“info0001”变为可见，当用户离开“dot0001”时，“info0001”再次变为不可见。同样适用于“dot0002”-“info0002”，“dot0003”-“info0003”等。因此，只有具有相应4位数字的信息图像才可见

我做了无数次尝试，但都没有成功，粘贴代码也毫无意义

---

感谢您的帮助

类似的方法应该可以工作（尽管未经测试）：

它使用选择器选择id以“点”开头的所有元素，然后将事件处理程序绑定到这些元素。事件处理程序函数本身只是将

id

中的“点”部分替换为“info”，以形成正确的新元素，然后根据需要显示或隐藏元素

---

不要忘记将该代码包装到事件处理程序中，以便在元素实际存在时执行，否则它将无法工作。

类似的操作应该可以工作（尽管未经测试）：

它使用选择器选择id以“点”开头的所有元素，然后将事件处理程序绑定到这些元素。事件处理程序函数本身只是将

id

中的“点”部分替换为“info”，以形成正确的新元素，然后根据需要显示或隐藏元素

---

不要忘记将该代码包装在事件处理程序中，以便在元素实际存在时执行该代码，否则它将无法工作。

获取id以“点”开头的所有元素，并在鼠标上方/外侧显示/隐藏相关的“信息”：

$("[id^=dot]").hover(
  function(){
    $("#info" + this.id.substring(3)).css({"visibility":"visible"});
  },
  function(){
    $("#info" + this.id.substring(3)).css({"visibility":"hidden"});
  }
);

---

获取id以“点”开头的所有元素，并在鼠标上显示/隐藏相关的“信息”：

$("[id^=dot]").hover(
  function(){
    $("#info" + this.id.substring(3)).css({"visibility":"visible"});
  },
  function(){
    $("#info" + this.id.substring(3)).css({"visibility":"hidden"});
  }
);

---

工作正常！万分感谢！我能再请你帮忙吗？“点****”图像和相应的“信息****”图像在其拐角处重叠。我如何确保我可以在可见的“信息****”图像上悬停，而不会再次消失？例如，现在当我将鼠标从图像“dot0001”移动到图像“info0001”时，后者消失了。在本例中，我如何确保只要鼠标在“info0001”上，“info0001”就保持可见？如果它们之间没有间隙，请使用类似于此的东西，它就可以工作。我唯一需要更改的是您在选择器中的“[id^=dot]”之前添加的“div”。非常有效！万分感谢！我能再请你帮忙吗？“点****”图像和相应的“信息****”图像在其拐角处重叠。我如何确保我可以在可见的“信息****”图像上悬停，而不会再次消失？例如，现在当我将鼠标从图像“dot0001”移动到图像“info0001”时，后者消失了。在本例中，我如何确保只要鼠标在“info0001”上，“info0001”就保持可见？如果它们之间没有间隙，请使用类似于此的东西，它就可以工作。我唯一需要更改的是您在选择器中的“[id^=dot]”之前添加的“div”。虽然不起作用，但感谢您为DOM准备好的提示（以及链接），否则可能会错过它@Haley您使用的是什么版本的jQuery？如果是在1.7版本之前，那么

.on（）

函数将无法工作（它是在1.7版本中添加的）。不知怎的，它无法工作，但是感谢您为DOM准备好的提示（以及链接）可能会错过它@Haley您使用的是什么版本的jQuery？如果是在1.7之前，则

.on（）

函数将无法工作（它是在1.7中添加的）。