代码之家 › 专栏 › 技术社区 › Yash009

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

css html jquery javascript

Yash009 · 技术社区 · 7 年前

另外,如果我从第一个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(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/

3 回复 | 直到 7 年前

Sushanth -- 7 年前

而不是申请 inline 样式,有一个保持元素隐藏的类,并在enter和leave上切换类。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 secondImage" alt="" src="https://www.holmescustom.com/media/wysiwyg/Fern.jpg" />
  </div>
  <div class="col-xs-6 hide" 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 hide" 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>

mwilson 7 年前

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

由于您只希望信息显示在hover上,因此我将设置信息 display: none mouseover/mouseout .hide 和 .show

你也不必像我下面所说的那样使用id映射,我建议使用 data-attribute 保存某种标识符,您可以从悬停时的元素中获取该标识符。一旦你有了这个idenifier,你就可以用它来找到正确的信息div。或者更好的是,用不同的结构来构造你的html,使它有一个包含图像和信息元素的容器div。然后,你可以使用 $.closest 获取与图像最近的信息div(将是正确的),然后隐藏/显示该信息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>

Anis R. 7 年前

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

jQuery(document).ready 处理程序:

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