javascript - How do I get a div to display a specific image when a user mouses over either of two divs? -
i want div class features_3_content_center
display fh_mainmenu.png
image when user mouses on div id fh_blurb
, or display hds_mainmenu.png
image when user mouses on div id hds_blurb
.
i've attempted below having both images on top of each other in features_3_content_center
, having display image based on id. doesn't seem work, displays first image (hds_mainmenu.png) , doesn't change on mouseover. 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/
kind of 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 in action in demo
Comments
Post a Comment