Javascript 如果将光标悬停在图像div上，则显示图像div的相应信息div

我希望信息div在我悬停在相应的image div上时显示。信息div不是子级或父级，并且未连接到image div。 另外，如果我从第一个div离开鼠标并将鼠标悬停在第二个div上，我希望加载第二个div的信息

这是我的HTML代码

 <div class="row">
   <div class="col-xs-6">
     <img class="meetTheTeamImg leaders firstImg" alt=""       src="https://www.holmescustom.com/media/wysiwyg/Bryan.jpg"/>
   </div>
   <div class="col-xs-6">
      <img class="meetTheTeamImg leaders secondImg" alt="" src="https://www.holmescustom.com/media/wysiwyg/Fern.jpg"/>
   </div>
  <div class="col-xs-6" id="bryanInfo">
      <p>Bryan received a Marketing degree from the University of North Florida and joined the family Company in 1998 starting in</p>
  </div>
   <div class="col-xs-6" id="fernInfo">
      <p>Steve received his Bachelor of Science in Computer Engineering from the University of Florida and Masters of Business Administration.</p>
   </div>
</div>

并链接到我的小提琴

---

不要应用

内联

样式，而是使用一个保持元素隐藏的类，并在enter和leave上切换类

jQuery（“.leaders.firstImg”）.mouseenter(
函数（）{
jQuery（'#bryanInfo'）.removeClass（'hide'）；
}).mouseleave（函数（）{
jQuery（'#bryanInfo'）.addClass（'hide'）；
});
jQuery（“.leaders.secondImage”）.mouseenter(
函数（）{
jQuery（'#fernInfo'）.removeClass（'hide'）；
}).mouseleave（函数（）{
jQuery（'#fernInfo'）.addClass（'hide'）；
});
.hide{
显示：无；
}

布莱恩从北佛罗里达大学获得市场营销学位，1998年初加入了家族公司，在

史提夫从佛罗里达大学获得计算机工程学士学位和工商管理硕士学位。
首先，注意名称不匹配！在HTML脚本中，您使用的是
secondImage
类名，而在JQuery中将其称为
secondImg

另外，在第一次加载页面时，也不要忘记最初隐藏描述，即在
jQuery（文档）中。ready
处理程序：

jQuery('#bryanInfo').css("display", "none");
jQuery('#fernInfo').css("display", "none");

您不需要jquery来执行此操作，但如果必须这样做，这里有一个示例：

由于您只希望信息显示在悬停状态，因此我将默认设置信息
display:none
。这样，当您连接
mouseover/mouseout
方法时，只需使用
.hide
和
.show
即可，而无需尝试更新类。我使你的图像有一个50像素的高度，但可以删除。只是为了测试而添加的

您也不必像下面那样使用id映射，我建议通过使用
数据属性来保存某种标识符（您可以从悬停的元素中获取该标识符），使其更具可伸缩性。一旦你有了这个idenifier，你就可以用它来找到正确的信息div。或者更好的是，用不同的结构来构造你的html，使它有一个包含图像和信息元素的容器div。然后，您可以使用
$.closest
获取与图像最近的信息div（这将是正确的），然后隐藏/显示该div

以下是一种简化的结构方式（不使用jQuery）：



jQuery（文档）.ready（函数（）{
$（'bryan'）.mouseover（（e）=>$（'bryanInfo'）.show（））
$（'bryan'）.mouseout（（e）=>$（'bryanInfo'）.hide（））
$（'#fern'）.mouseover（（e）=>$（'#fernInfo'）.show（））
$（'#fern'）.mouseout（（e）=>$（'#fernInfo'）.hide（））
});
img{
高度：50px；
}
#费尼诺，#bryanInfo{
显示：无；
}

布莱恩从北佛罗里达大学获得市场营销学位，1998年初加入了家族公司，在

史提夫从佛罗里达大学获得计算机工程学士学位和工商管理硕士学位。
谢谢，这确实有效。我正在寻找一个更具可扩展性的解决方案。如果你能详细说明，或者你能给我指出一个资源，那将是非常棒的。不过，这个解决方案目前还有效。如果你问另一个问题，我很乐意提供答案谢谢你的评论，我在问题中做了必要的编辑。
jQuery('#bryanInfo').css("display", "none");
jQuery('#fernInfo').css("display", "none");