jQuery backgroundPosition CSS sprites不能一起工作？

我已经开始为我的照片制作网络组合我不是一个网页设计师，它只是让我感兴趣。以下是jsfiddle中的页面：http://jsfiddle.net/RhjJZ/1/。我制作了CSS sprite来为<a>链接创建背景。我希望它们在鼠标移过去时改变，所以我用jQuery制作了这个脚本，它似乎工作，我无法想象为什么，尝试了很多不同的方法......在互联网，但他们无法帮助我。如果有人指出我做错了什么，我会很高兴！而我的菜单图片是1x296像素。jQuery backgroundPosition CSS sprites不能一起工作？

来源

2013-02-28 godzsa

哪里'val'参数是从哪里来的？ – 2013-02-28 18:03:40

来自HTML的onmouseover（）。 – godzsa 2013-02-28 18:04:55

你可以在小提琴上添加一个'menu.png'吗？ – 2013-02-28 19:55:40

问题是由于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); 
});

来源

2013-02-28 18:24:31

所以我必须编写mouseover和mouseout在每个''中分别检测jquery？ – godzsa 2013-02-28 18:37:20

我不小心粘贴了错误的javascript。回答你的问题，不。 – 2013-02-28 19:00:30

谢谢你的帮助！ – godzsa 2013-02-28 19:04:55

jQuery backgroundPosition CSS sprites不能一起工作？

回答

相关问题