Question

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

Answer 1

问题是由于jQuery，您的menu()函数不在正常范围内，因此您收到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);
});

jQuery backgroundPosition css sprites不能一起工作？

1 个答案: