Show the corresponding information div of the image div if hovered on the image div

Question

I want the information div to show up when I hover on the corresponding image div. The information div is not a child or parent and is not connected to the image div. Also, I want the information of the second div to be loaded if I leave the mouse from the first div and hover over the second.

This is my HTML code

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

And this is my jQuery code

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

And link to my fiddle http://jsfiddle.net/yash009/Lg2eh7vu/13/

Answer 1

Instead of applying inline styles, have a class that keeps the element hidden and toggle the classes on enter and 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> 

Answer 2

You don't need jquery to do this, but if you must here is an example:

Since you only want the info to be displayed on hover, I would set the information display: none by default. This way, when you hook up your mouseover/mouseout methods, you can just use .hide and .show instead of trying to update classes. I made your images have a height of 50px, but that can be removed. Only added it for testing.

You also don't have to use the id mapping like I have it below, I would suggest making it a little more scalable by using maybe a data-attribute to hold some sort of identifier which you would grab from the element on hover. Once you have that idenifier, then you can use that to find the right information div. Or better yet, structure your html differently to have a container div with an image and information element inside of it. Then, you can use $.closest to grab the closest information div to your image (which will be the correct one) and then hide/display that.

Here is a simplified way of how you could structure it (not using 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

First, beware of the name mismatch! In your HTML script, you are using secondImage class name, while you are referring to it as secondImg in your JQuery.

Also, don't forget to hide the descriptions initially, when the page is first loaded, ie in your jQuery(document).ready handler:

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