Question

所以我想在我的新网站上重新设计一个有趣的互动导航。总体思路如上所述。我想模仿一个URL栏，就像你将鼠标悬停在导航栏上的不同按钮上一样，它会改变栏中的URL。

这是网站： http://droddle.com/2013/

正如您所看到的，当某人访问主页（即博客）时，我希望URL栏显示为“Droddle.com/blog”。当您将鼠标悬停在博客图标上时，我希望Droddle.com部分变为灰色，而/ blog部分变为白色。我将所有图像都放在精灵表中。

所以整体主题是你所在的页面，默认情况下我希望相应的URL显示url的图像，其中Droddle.com为白色，灰色为/。每当您将鼠标悬停在导航链接上时，我希望网址栏显示相应的网址图形，其中droddle.com为灰色，而/为白色。但是当你使用导航按钮的mouseOut时，我希望所有内容都返回到原始状态，以便它可以再次显示当前页面。

如果您需要更多说明，请告诉我

这是我的代码：

的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

如果你想要这样的话：http://jsfiddle.net/yQ85p/

这是给你的代码：

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);
}

我为博客做了这个＆amp;关于链接，所以你可以复制粘贴其他链接。

jQuery Navigation Change Class，但返回必要的类

1 个答案: