How do I get a div to display a specific image when a user mouses over either of two divs?

Question

I want the div with the class features_3_content_center to display the FH_MainMenu.png image when a user mouses over the div with id FH_Blurb , or display the HDS_MainMenu.png image when a user mouses over the div with id HDS_Blurb .

I've attempted this below by having both images on top of each other in features_3_content_center and having it display the image based on its id. This doesn't seem to work, it just displays the first image (HDS_MainMenu.png) and doesn't change on mouseover. What am I doing wrong?

 PicChanger: function() { $('#FH_Blurb').mouseover(function() { $('.features_3_content_center').getElementById('#features3_FH_image'); }); $('#HDS_Blurb').mouseover(function() { $('.features_3_content_center').getElementById('#features3_HDS_image'); }); }, 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-sm-4 col-md-4 ol-lg-4" id="features_3_content_left"> <div class="feature" id="FH_Blurb"> <h4>Fizz+Hummer</h4> <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. </p> </div> </div> <div class="col-sm-4 col-md-4 ol-lg-4"> <div class="features_3_content_center"> <img src="images/HDS_MainMenu.png" class="img-responsive" id="features3_HDS_image" alt="img"> <img src="images/FH_MainMenu.png" class="img-responsive" id="features3_FH_image" alt="img"> </div> </div> <div class="col-sm-4 col-md-4 ol-lg-4" id="features_3_content_right"> <div class="feature" id="HDS_Blurb"> <div> <h4 class="we_make_games_HDS_text">Human Delivery Service</h4> <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. </p> </div> </div> </div> </div> 

JSFiddle: http://jsfiddle.net/2hL71dsr/

Answer 1

Kind of like this:

$('#features3_FH_image, #features3_HDS_image').hide();           

$('#FH_Blurb').hover(function() {
  $('#features3_FH_image').toggle();
});

$('#HDS_Blurb').hover(function() {
  $('#features3_HDS_image').toggle();
});

See it in action in this demo

Answer 2

You aren't actually doing anything to the images. Here is a simple, straight-forward method of showing the images on mouseover, then hiding them again on mouseout.

var imgContainer = $('.features_3_content_center');
var FH_image = imgContainer.find('#features3_FH_image').hide();
var HDS_image = imgContainer.find('#features3_HDS_image').hide();
$('#FH_Blurb').on('mouseover', function() {
  FH_image.show();
});
$('#FH_Blurb').on('mouseout', function() {
  FH_image.hide();
});
$('#HDS_Blurb').on('mouseover', function() {
  HDS_image.show();
});
$('#HDS_Blurb').on('mouseout', function() {
  HDS_image.hide();
});