Offcanvas header image - change on hover

[INcroatia]

Hi there,

So far we’ve been using a JavaScript code in the" Global JS" area to add an image (logo) to the “Navigation Collapsed” element. The code is as following:

 /*start offcanvas header*/

jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 1) {
            $('.x-logobar').addClass("fixed-top");
        } else {
            $('.x-logobar').removeClass("fixed-top");
        }
    });
});

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop()<=0) {
              $('.x-navbar').removeClass("x-navbar-fixed-top");
      }
    });
});


jQuery ( function($) {

$(window).on('scroll', function(){

if ( $( '.x-navbar' ).hasClass('x-navbar-fixed-top') ) 
$ ( 'a.x-brand.img img' ).attr('src','http://37.60.251.188/~birthda8/getboober.com/wp-content/uploads/2017/03/boober-breastfeeding-help-support-new-moms-lacatation-consultant-la-leche-league-new-york-city-park-slope-brooklyn-background-logo-2.png'); 
else

$ ( 'a.x-brand.img img' ).attr('src','http://37.60.251.188/~birthda8/getboober.com/wp-content/uploads/2017/03/boober-breastfeeding-help-support-new-moms-lacatation-consultant-la-leche-league-new-york-city-park-slope-brooklyn-background-logo-3-1.png'); 

} );

} );

 jQuery(document).ready(function($){
   $('.x-off-canvas-content').prepend('<a class="x-image" href="https://getboober.com/"><img alt="Image" src="https://getboober.com/wp-content/uploads/2017/10/boober-breastfeeding-help-support-new-moms-lacatation-consultant-la-leche-league-new-york-city-park-slope-brooklyn-offcanvas.png" width="550" height="47"></a>');
 });

/*end offcanvas header*/

What we would like to do is be able to add another logo that would appear once a user hovers over it, but we haven’t been successful.

We’ve added this snippet:

$(document).ready(function(){
    $('img').hover(
        function(){$(this).attr("src","https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/exit.png")},
        function(){$(this).attr("src","https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png")}
    );
});

and while it worked, it changed both the logo in the “Navigation Collapsed” element, which was the goal, but also the logo that was outside of it, as an element on the main header bar.

How can we change the JS so that the hover logo change appears only on the “Navigation Collapsed” element, without disturbing the image in any other places we have it?

[ruenel]

Hello Paper+Screen,

Thanks for writing in!

The $('img').hover(); statement affects all the image elements. If you only want to target the image in the off-canvas, please use the off-canvas class before the image tag in your code like this:
$('.x-off-canvas-content img').hover();

Be advised that you are adding custom code to your site to accomplish your custom modifications. Custom coding is way beyond the scope of our support. You may need to contact the 3rd party developer if you are not familiar with JS coding.

Thank you for your understanding.

[INcroatia]

Thanks @ruenel, you saved the day!

[lely]

You’re always welcome @INcroatia!

Cheers.