Question

So I am trying to make a fun and interactive navigation on my new website redesign. The overall idea is as stated. I want to mimic a URL bar, as in when you hover over different buttons on the navigation, it will change the URL in the bar.

Here is the website:
http://droddle.com/2013/

As you can see, when somebody comes to the home page, which is the blog, I want the URL bar to read, “Droddle.com/blog”. When you hover over the blog icon, I want the Droddle.com part to become gray, and the /blog part to become white. I have all the images laid out in a sprite sheet.

So the overall theme is whatever page you are on, by default I want the corresponding URL to display the image of the url with the Droddle.com in white, and the /whatever in gray. Whenever you hover over a nav link, I want the url bar to display the corresponding url graphic with the droddle.com in gray and the /whatever in white. But when you mouseOut of the nav button, I want everything to return to the original state so that it can once again show the current page.

Let me know if you need more clarification

Here is my code:

jQuery

$(document).ready(function(){

    $('a.navlink.blog').hover(function () {
        $('div.url_text').addClass('blog').addClass('up');
    }, function () {
        $('div.url_text').removeClass('up').addClass('blog');
    });

});

HTML

    <div class="url_bar">
        <div class="url_text blog down"></div>
    </div>

CSS

div.url_bar {
    width: 347px;
    height: 47px;
    margin: 60px 0 0 0;
    padding: 0;
    background: url(images/url_bar.png) no-repeat center center;
    float: left;
}

    div.url_text.blog {
        width: 175px;
        height: 24px;
        margin: 14px 0 0 15px;
        padding: 0;
        background: url(images/url_bar_text.png) no-repeat;
    }

    div.url_text.blog.down {
        background-position: -16px -14px;
    }

    div.url_text.blog.up {
        background-position: -273px -14px;
    }

    div.url_text.about {
        width: 190px;
        height: 24px;
        margin: 14px 0 0 15px;
        padding: 0;
        background: url(images/url_bar_text.png) no-repeat;
    }

    div.url_text.about.down {
        background-position: -16px -49px;
    }

    div.url_text.about.up {
        background-position: -273px -49px;
    }

Answer 1

If you want something like this : http://jsfiddle.net/yQ85p/

here’s the code for you:

var defaultLogoClass = "";

$(document).ready(function(){

        defaultLogoClass = $('div.url_text').attr('class');

        $('a.navlink.blog').hover(function () {
            $('div.url_text').attr("class",'url_text blog up');
        }, function () {
            resetLogo();
        });

  $('a.navlink.about').hover(function () {
            $('div.url_text').attr("class",'url_text about up');
        }, function () {
            resetLogo();
        });

    });

function resetLogo(){
  $('div.url_text').attr("class",defaultLogoClass);
}

I did this for blog & about links, so you can copy paste the others.