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

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -