0

我已经开始为我的照片制作网络作品集。我不是网页设计师，它只是让我感兴趣。这是页面： jsfiddle中的http://jsfiddle.net/RhjJZ/1/。我制作了 CSS 精灵来为<a>链接制作背景。我希望它们在鼠标悬停在它们上方时进行更改，所以我用 jQuery 制作了该脚本，它似乎确实有效，我无法想象为什么，尝试了很多不同的方式......搜索了很多类似的问题互联网，但他们无法帮助我。如果有人指出我做错了什么，我会很高兴！我的菜单图片是 1x296 像素的。

4

1 回答 1

0

问题是menu()由于 jQuery，您的函数不在正常范围内，因此您收到 Javascript 错误：menu(xx) is not a function.

解决方案是使用data-前缀属性方案设置这些硬编码值，然后使用 jQuery处理mouseover和事件。mouseout

HTML：

<body>
    <header id="menu">
            <h1>dawe's portfolio</h1>

        <nav>   <a id="m_portf" data-one="0" data-two="-37" href="#portfolio"
            width="1px">portfolio</a>
    <a id="m_music" data-one="-72" data-two="-111"
            href="#music">music</a>
    <a id="m_about" data-one="-148" data-two="-185"
            href="#about">about</a>
    <a id="m_contact" data-one="-222" data-two="-259"
            href="#contact">contact</a>

        </nav>
    </header>
</body>

Javascript：

$('a').on('mouseover',function(){
    $(this).animate({'background-position': '0px ' +$(this).attr('data-one')+'px';}, 1500);
});

$('a').on('mouseout',function(){
    $(this).animate({'background-position': '0px ' +$(this).attr('data-two')+'px';}, 1500);
});
于 2013-02-28T18:24:31.977 回答