0

所以我正在尝试在我的新网站重新设计中制作一个有趣的交互式导航。总体思路如前所述。我想模仿一个 URL 栏，就像当您将鼠标悬停在导航上的不同按钮上时，它会更改栏中的 URL。

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

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

因此，总体主题是您所在的任何页面，默认情况下，我希望相应的 URL 显示 url 的图像，其中 Droddle.com 为白色，/whatever 为灰色。每当您将鼠标悬停在导航链接上时，我希望 url 栏显示相应的 url 图形，其中 droddle.com 为灰色，/whatever 为白色。但是当你将鼠标移出导航按钮时，我希望一切都恢复到原来的状态，以便它可以再次显示当前页面。

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

这是我的代码：

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

1 回答 1

0

如果你想要这样的东西：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);
}

我这样做是为了博客和关于链接，所以你可以复制粘贴其他的。

于 2013-01-13T01:24:49.980 回答