javascript - hover在图片div上显示图片div对应的信息div

Question

我希望当我将鼠标悬停在相应的图像 div 上时显示信息 div。信息 div 不是子级或父级，也没有连接到图像 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>

这是我的 jQuery 代码

jQuery(document).ready(function () {
    jQuery(".leaders.firstImg").mouseover(
    function () {
        jQuery('#bryanInfo').css("display", "block");
    });
    jQuery(".leaders.secondImg").mouseover(
    function () {
        jQuery('#fernInfo').css("display", "block");
    });
});

并链接到我的 fiddle http://jsfiddle.net/yash009/Lg2eh7vu/13/

Answer 1

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

因为你只想在悬停时显示信息，我会默认设置信息 display: none。这样，当您连接您的 mouseover/mouseout 方法时，您可以只使用 .hide 和 .show 而不是尝试更新类。我让你的图像有 50px 的高度，但可以删除。仅添加它用于测试。

您也不必像我在下面那样使用 id 映射，我建议通过使用 data-attribute 来保存某种标识符来使其更具可扩展性你会在悬停时从元素中抓取。一旦你有了这个标识符，你就可以用它来找到正确的信息 div。或者更好的是，以不同的方式构建您的 html，使其具有一个容器 div，其中包含图像和信息元素。然后，您可以使用 $.closest 获取最接近您的图像的信息 div(这将是正确的)，然后隐藏/显示它。

以下是构建它的简化方法(不使用 jQuery):

https://jsfiddle.net/mswilson4040/gnh2wpvu/10/

jQuery(document).ready(function () {
  $('#bryan').mouseover( (e) => $('#bryanInfo').show())
  $('#bryan').mouseout( (e) => $('#bryanInfo').hide())
  $('#fern').mouseover( (e) => $('#fernInfo').show())
  $('#fern').mouseout( (e) => $('#fernInfo').hide())
});

img {
  height: 50px;
}
#fernInfo, #bryanInfo {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
   <div class="col-xs-6" id="bryan">
     <img class="meetTheTeamImg leaders firstImg" alt=""       src="https://www.holmescustom.com/media/wysiwyg/Bryan.jpg"/>
   </div>
   <div class="col-xs-6" id="fern">
      <img class="meetTheTeamImg leaders secondImage" 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>