如果將鼠標懸停在圖像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");
    });
});

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

Answer 1

而不是應用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; } 

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

Answer 2

您不需要jquery來執行此操作，但是如果必須這樣做，則是一個示例：

由於您只希望將信息顯示在懸停上，因此我將設置信息display: none默認情況下為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> 

Answer 3

首先，提防名稱不匹配！ 在HTML腳本中，您正在使用secondImage類名，而在JQuery secondImg其稱為secondImg 。

另外，不要忘記在第一次加載頁面時即在jQuery(document).ready處理程序中最初隱藏描述。

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