Navbar color change on hover

Hello.

Im trying to change the color of the links in the navbar on hover. (it also changes the logo)

I have this in the js

var $=jQuery.noConflict();

$(document).ready(function(){
$(".x-navbar-inner").hover(function(){
$(".x-brand img").attr(“src”,“http://piaggio.co.nz/wp-content/uploads/2018/07/logo_ve_wh.png”);
$(“a”).css(“color”, “#ffffff”);
},function(){
$(".x-brand img").attr(“src”,“http://piaggio.co.nz/wp-content/uploads/2018/07/logo_ve_blc.png”);
$(“a”).css(“color”, “#0088ce”);

});
});

And this in the css

.x-navbar-inner:hover
{
background: #0088ce;
transition: 0.7s ease-out;
}

.x-navbar-inner
{
transition: 0.5s ease-in;

}

The problem is that it changes all the “a” elements, I cant make it work for only the menu. Can I have some help please?
You can see the example in http://piaggio.co.nz/find-a-dealer/

Thank you.

Hi There,

Thanks for writing in!

Please update the JS with this CSS and let us know if that works.

var $=jQuery.noConflict();

$(document).ready(function(){
    $(".x-navbar-inner").hover(function(){
    $(".x-brand img").attr("src","http://piaggio.co.nz/wp-content/uploads/2018/07/logo_ve_wh.png");
    $(".x-nav li a").css("color", "#ffffff");
  },function(){
    $(".x-brand img").attr("src","http://piaggio.co.nz/wp-content/uploads/2018/07/logo_ve_blc.png");
    $(".x-nav li a").css("color", "#0088ce");
});
});


Hope this helps!

1 Like

Good day.
Marvellous, thank you!

You’re welcome, and you too. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.