Jquery div toggle only working for one div

Question

I'm trying to have a div show one of two images, depending on which div a user hovers over. The solution below works, but only for a mouseover of #FH_Blurb , a mouseover of #HDS_Blurb doesn't do anything.

Any idea why? Both images exist in the images folder.

HTML:

<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/FH_MainMenu.png" class="img-responsive" id="features3_FH_image" alt="img">
                <img src="images/HDS_MainMenu.png" class="img-responsive" id="features3_HDS_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>

JQuery:

PicChanger: function(){

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

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

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

Answer 1

try with this

$( document ).ready(function() {
      //code here   });

//Edit

try setting each image on different div.

Answer 2

You need a br tag.

<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><br>
        <div class="col-sm-4 col-md-4 ol-lg-4">
            <div class="features_3_content_center">
                <img src="images/FH_MainMenu.png" class="img-responsive" id="features3_FH_image" alt="img">
                <img src="images/HDS_MainMenu.png" class="img-responsive" id="features3_HDS_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>

Answer 3

What I recommend using the handleOut callback with hover:

$(selector).hover(function(){
 //do something 
}, function(){
 //do something 
});

Then use either, .css/ .animate/ .slideUp, .slideDown or whatever you feel is appropriate for your final result.

Also check out the .stop() and .delay() jQuery APIs to prevent propagation.