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");
    });
});

并链接到我的小提琴 http://jsfiddle.net/yash009/Lg2eh7vu/13/

Answer 1

有一个类可以使元素保持隐藏，并在进入和离开时切换类，而不是应用__Swizzle_InitWithFrame样式。

inline

jQuery(".leaders.firstImg").mouseenter(
  function() {
    jQuery('#bryanInfo').removeClass('hide');
  }).mouseleave(function() {
  jQuery('#bryanInfo').addClass('hide');
});

jQuery(".leaders.secondImage").mouseenter(
  function() {
    jQuery('#fernInfo').removeClass('hide');
  }).mouseleave(function() {
  jQuery('#fernInfo').addClass('hide');
});

.hide {
  display: none;
}

Answer 2

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

由于您只希望将信息显示在悬停上，因此默认情况下，我将设置信息display: none。这样，当您连接mouseover/mouseout方法时，可以只使用.hide和.show而不是尝试更新类。我使您的图片高度为50px，但是可以将其删除。仅添加它进行测试。

您也不必像下面那样使用id映射，我建议通过使用data-attribute来保存从ID中获取的某种标识符，使其更具可伸缩性。悬停元素。一旦有了该标识符，就可以使用它来查找正确的信息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>

Answer 3

首先，请注意名称不匹配！在HTML脚本中，您正在使用secondImage类名，而在JQuery中将其称为secondImg。

此外，当页面首次加载时，即在您的jQuery(document).ready处理程序中，请不要忘记最初隐藏描述：

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

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

3 个答案: